/* Sign-in, Access Denied, 404 and Error pages (_AuthLayout). Ported from
   Project Evergreen's auth layout. Light only: a white page whatever theme the
   visitor picked for the main site. One typeface, Inter, like Project Eagle's
   sign-in: no Geometos capitals and no mono labels (the user, 2026-10-20). */
@import "_brand.css";

:root {
    color-scheme: light;
    --bg-primary: var(--bnb-white);
    --bg-card: var(--bnb-white);
    --border-color: #E6E6E4;
    --border-light: #D4D4D1;
    --text-primary: var(--bnb-black);
    --text-secondary: var(--bnb-gray-80);
    --text-muted: #8A8C90;
    --input-bg: var(--bnb-white);
    --cta-bg: var(--bnb-black);
    --cta-text: var(--bnb-white);
    --grid-line: rgba(10, 10, 10, 0.045);
    --card-shadow: 0 12px 40px rgba(10, 10, 10, 0.07), 0 2px 8px rgba(0, 0, 0, 0.03);
    --font-ui: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { font-size: 16px; height: 100%; }
body { margin: 0; min-height: 100vh; font-family: var(--font-ui); display: flex; align-items: center; justify-content: center; background: var(--bg-primary); color: var(--text-primary); -webkit-font-smoothing: antialiased; }

.ev-backdrop { position: fixed; inset: 0; pointer-events: none; z-index: 0; }
.ev-grid { position: absolute; inset: 0; background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px); background-size: 64px 64px; mask-image: radial-gradient(ellipse 75% 65% at 50% 50%, black 10%, transparent 70%); -webkit-mask-image: radial-gradient(ellipse 75% 65% at 50% 50%, black 10%, transparent 70%); }

.ev-container { position: relative; z-index: 1; width: 100%; max-width: 552px; padding: 24px 16px; }
.ev-card { display: flex; flex-direction: column; align-items: center; text-align: center; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--bnb-radius-md); padding: 48px 44px 40px; box-shadow: var(--card-shadow); opacity: 0; animation: evFadeUp 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.1s forwards; }

/* Logo and page title read as one lockup: a smaller mark, a short gap, and a
   lighter title under it, then the full gap before the page's content. */
.ev-brand { display: flex; align-items: center; justify-content: center; margin-bottom: 14px; }
.ev-brand-logo { height: 24px; width: auto; display: block; }

.ev-eyebrow { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--bnb-red); margin: 0.6rem 0 0.5rem; }
.ev-title { font-family: var(--font-ui); font-size: 1.35rem; font-weight: 600; letter-spacing: 0; line-height: 1.25; margin: 0 0 0.8rem; color: var(--text-primary); }
.ev-title-accent { color: var(--bnb-red); }
.ev-title--lead { margin-bottom: 1.9rem; }
.ev-hint { margin: 0.7rem 0 0; font-size: 0.8rem; line-height: 1.5; color: var(--text-muted); }
.ev-hint--lead { width: 100%; text-align: left; margin: -0.5rem 0 0.8rem; }
.ev-tagline { font-size: 0.95rem; line-height: 1.55; color: var(--text-secondary); margin: 0 0 1.75rem; max-width: 360px; }

.ev-cta { display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem; width: 100%; padding: 14px 24px; background: var(--cta-bg); border: 1px solid var(--cta-bg); color: var(--cta-text); font-size: 0.9rem; font-weight: 600; border-radius: var(--bnb-radius-sm); cursor: pointer; text-decoration: none; transition: background 0.2s, border-color 0.2s, color 0.2s, transform 0.2s; margin-top: 0.4rem; }
.ev-cta:hover { background: var(--bnb-red); border-color: var(--bnb-red); color: var(--bnb-white); transform: translateY(-1px); }
.ev-cta--ghost { background: transparent; color: var(--text-primary); border-color: var(--border-light); }
.ev-cta--dev { margin-top: 1.4rem; }

.ev-sso { display: inline-flex; align-items: center; justify-content: center; gap: 0.65rem; width: 100%; padding: 13px 20px; background: var(--input-bg); border: 1px solid var(--border-light); color: var(--text-primary); font-size: 0.92rem; font-weight: 600; border-radius: var(--bnb-radius-sm); cursor: pointer; text-decoration: none; transition: border-color 0.2s, transform 0.2s; }
.ev-sso:hover { border-color: var(--text-primary); color: var(--text-primary); transform: translateY(-1px); }

/* Partner sign-in: email, then the emailed code (js/sign-in.js). The placeholder carries the label; the real one is visually hidden. */
.ev-guest { width: 100%; text-align: left; }
.ev-visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.ev-guest-row { display: flex; gap: 0.5rem; }
.ev-guest-input { flex: 1; min-width: 0; padding: 11px 13px; font: inherit; font-size: 0.92rem; color: var(--text-primary); background: var(--input-bg); border: 1px solid var(--border-light); border-radius: var(--bnb-radius-sm); outline: none; transition: border-color 0.2s, box-shadow 0.2s; }
.ev-guest-input:focus { border-color: var(--text-primary); box-shadow: 0 0 0 3px rgba(10, 10, 10, 0.08); }
.ev-guest-input--code { font-size: 1.15rem; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: 0.4em; text-align: center; }
.ev-guest-btn { padding: 11px 18px; background: var(--cta-bg); border: 1px solid var(--cta-bg); color: var(--cta-text); font: inherit; font-size: 0.88rem; font-weight: 600; border-radius: var(--bnb-radius-sm); cursor: pointer; white-space: nowrap; transition: background 0.2s, border-color 0.2s, opacity 0.2s; }
.ev-guest-btn:hover { background: var(--bnb-red); border-color: var(--bnb-red); }
.ev-guest-btn:disabled { opacity: 0.55; cursor: default; background: var(--cta-bg); border-color: var(--cta-bg); }
.ev-guest-msg { margin: 0.7rem 0 0; min-height: 1.2em; font-size: 0.8rem; line-height: 1.5; color: var(--text-muted); }
.ev-guest-msg.is-error { color: var(--bnb-red); }
.ev-guest-msg:empty { min-height: 0; margin: 0; }
.ev-guest-sent { margin: 0 0 0.6rem; font-size: 0.82rem; line-height: 1.5; color: var(--text-secondary); overflow-wrap: anywhere; }
.ev-guest-sent strong { color: var(--text-primary); }
.ev-guest-link { padding: 0; background: none; border: none; font: inherit; font-weight: 600; color: var(--bnb-red); cursor: pointer; }
.ev-guest-link:hover { text-decoration: underline; }
.ev-guest-link:disabled { color: var(--text-muted); cursor: default; text-decoration: none; }
.ev-guest-links { display: flex; gap: 1rem; }
.ev-guest-msg.is-error + .ev-guest-links { margin-top: 0.4rem; }

.ev-meta { margin-top: 1.2rem; font-size: 0.82rem; line-height: 1.55; color: var(--text-muted); max-width: 360px; }
.ev-meta a { color: var(--bnb-red); text-decoration: none; font-weight: 500; }
.ev-meta a:hover { text-decoration: underline; }

.ev-error { text-align: left; width: 100%; margin-bottom: 1.1rem; padding: 0.85rem 1rem; background: rgba(161, 37, 43, 0.08); border: 1px solid rgba(161, 37, 43, 0.35); border-radius: var(--bnb-radius-sm); color: var(--text-primary); font-size: 0.88rem; line-height: 1.45; }

.ev-divider { width: 100%; display: flex; align-items: center; gap: 0.75rem; margin: 1.6rem 0 1.2rem; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-muted); }
.ev-divider::before, .ev-divider::after { content: ""; flex: 1; height: 1px; background: var(--border-color); }

.ev-actions { display: flex; gap: 0.6rem; width: 100%; margin-top: 0.4rem; }
.ev-actions > * { flex: 1; }
.ev-actions form { display: flex; }
.ev-actions .ev-cta { margin-top: 0; }

.ev-footer { margin-top: 2rem; padding-top: 1.2rem; border-top: 1px solid var(--border-color); width: 100%; display: flex; justify-content: center; gap: 1.25rem; font-size: 0.66rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); }
.ev-footer-item { display: flex; align-items: center; gap: 0.45rem; }
.ev-footer-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--bnb-red); }
.ev-footer-link { color: inherit; text-decoration: none; }
.ev-footer-link:hover { color: var(--bnb-red); }

@keyframes evFadeUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .ev-card { animation: none; opacity: 1; } }

@media (max-width: 480px) {
    .ev-card { padding: 36px 22px 28px; }
    .ev-title { font-size: 1.2rem; }
    .ev-guest-row { flex-direction: column; }
    .ev-actions { flex-direction: column; }
    .ev-footer { flex-wrap: wrap; gap: 0.5rem 1.1rem; }
}