/* Furiosa Events v2 sign-in screens. Same language as the Furiosa CRM v2 login
   (crm assets/css/auth-v2.css): form on white at the left, a navy stage with the suite
   tagline and one demo visual at the right. On phones the stage is a short band above the form. */
:root {
  --teal: var(--fs-teal); --teal-hover: var(--fs-teal-dark); --teal-ink: var(--fs-teal-ink); --teal-light: var(--fs-teal-light);
  --glow: var(--fs-glow); --navy: var(--fs-navy); --navy-deep: var(--fs-navy-deep); --ink: var(--fs-wm-furiosa);
  --text: var(--fs-text); --muted: var(--fs-muted); --line: var(--fs-line); --bg: var(--fs-bg);
  --display: var(--fs-font-display);
  --body: var(--fs-font-body);
  --stage-w: min(48vw, 760px);
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body.auth-v2 { margin: 0; background: var(--fs-white); font: 400 16px/1.5 var(--body); color: var(--muted); -webkit-font-smoothing: antialiased; }
.auth-v2 :focus-visible { outline: 3px solid var(--teal-ink); outline-offset: 3px; border-radius: var(--fs-r-sm); }
.auth-v2 [hidden] { display: none !important; }

/* Wordmark (suite style) */
.auth-wordmark { position: absolute; top: 32px; left: 40px; display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; z-index: 5; }
.auth-wordmark .orb { width: 34px; height: 34px; flex: none; }
.auth-wordmark .wm { display: inline-flex; align-items: baseline; gap: 10px; }
.auth-wordmark .wm-f { font-family: var(--fs-font-body); font-weight: 800; font-size: 15px; letter-spacing: .2em; line-height: 1; color: var(--fs-wm-furiosa); }
.auth-wordmark .wm-b { font-family: var(--fs-font-display); font-weight: 700; font-size: 16.25px; letter-spacing: -.01em; line-height: 1; color: var(--fs-wm-product); }

/* Form column */
.auth-panel { margin-right: var(--stage-w); min-height: 100vh; padding: 120px clamp(24px, 5vw, 72px) 56px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.auth-links { width: 100%; max-width: 420px; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--fs-s2) var(--fs-s4); margin-top: var(--fs-s6); padding-top: var(--fs-s4); border-top: 1px solid var(--line); font-size: 13px; }
.auth-links a { color: var(--muted); text-decoration: none; font-weight: 500; white-space: nowrap; }
.auth-links a:hover { color: var(--teal-ink); text-decoration: underline; }
.auth-links a[aria-current] { color: var(--text); font-weight: 600; }
.auth-card { width: 100%; max-width: 420px; }
.auth-card h1 { margin: 0 0 var(--fs-s3); font-family: var(--display); font-stretch: 115%; font-weight: 800; font-size: clamp(2.1rem, 3.4vw, 2.9rem); line-height: 1; letter-spacing: -.035em; color: var(--navy-deep); }
.auth-sub { margin: 0 0 var(--fs-s6); font-size: 16px; color: var(--muted); }
.auth-form { display: grid; gap: var(--fs-s4); }
.field { display: grid; gap: var(--fs-s2); }
.field > label { font-size: 14px; font-weight: 600; color: var(--ink); }
.auth-card input[type="email"], .auth-card input[type="password"], .auth-card input[type="text"] {
  width: 100%; height: 54px; padding: 0 var(--fs-s4); border: 1.5px solid var(--line); border-radius: var(--fs-r-md); background: var(--fs-white);
  font: 500 16px/1 var(--body); color: var(--text); transition: border-color .15s, box-shadow .15s;
}
.auth-card input:focus { border-color: var(--teal); box-shadow: 0 0 0 4px color-mix(in srgb, var(--fs-teal) 16%, transparent); outline: none; }
.auth-card input::placeholder { color: color-mix(in srgb, var(--fs-muted) 70%, var(--fs-white)); }
.auth-card input.is-bad { border-color: var(--fs-crit); }
.pw { position: relative; }
.pw input { padding-right: var(--fs-s7); }
.pw button { position: absolute; top: 0; right: 4px; width: 46px; height: 54px; border: 0; background: none; color: var(--muted); cursor: pointer; display: grid; place-items: center; }
.pw button:hover { color: var(--teal-ink); }
.pw svg { width: 20px; height: 20px; }
.err { font-size: 13.5px; font-weight: 500; color: var(--fs-crit-ink); }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: var(--fs-s3); flex-wrap: wrap; margin: 2px 0 var(--fs-s2); }
.check { display: inline-flex; align-items: flex-start; gap: var(--fs-s3); font-size: 14.5px; color: var(--muted); cursor: pointer; line-height: 1.45; }
.check input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--teal); flex: none; }
.auth-card a { color: var(--teal-ink); font-weight: 700; text-decoration: none; }
.auth-card a:hover { text-decoration: underline; }
.btn-auth { width: 100%; height: 54px; border: 0; border-radius: var(--fs-r-pill); background: var(--teal); color: var(--fs-white); font: 700 16px/1 var(--body); cursor: pointer; transition: background .15s; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.btn-auth:hover { background: var(--teal-hover); }
.auth-card a.btn-auth { color: var(--fs-white); }
.auth-card a.btn-auth:hover { text-decoration: none; }
.btn-google { width: 100%; height: 52px; border: 1.5px solid var(--line); border-radius: var(--fs-r-pill); background: var(--fs-white); color: var(--ink); font: 700 15px/1 var(--body); display: inline-flex; align-items: center; justify-content: center; gap: var(--fs-s3); }
.auth-card a.btn-google { color: var(--ink); }
.auth-card a.btn-google:hover { border-color: var(--teal); text-decoration: none; }
.btn-google img { width: 20px; height: 20px; }
.or { display: flex; align-items: center; gap: var(--fs-s4); margin: var(--fs-s5) 0; font-size: 13px; color: color-mix(in srgb, var(--fs-muted) 70%, var(--fs-white)); }
.or::before, .or::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.auth-alt { margin: var(--fs-s5) 0 0; text-align: center; font-size: 15px; color: var(--muted); }
.alert { border-radius: var(--fs-r-md); font-size: 14.5px; padding: var(--fs-s3) var(--fs-s4); margin: 0 0 var(--fs-s4); display: flex; justify-content: space-between; gap: var(--fs-s3); align-items: flex-start; }
.alert-error { background: var(--fs-crit-bg); color: var(--fs-crit-ink); border: 1px solid color-mix(in srgb, var(--fs-crit) 30%, var(--fs-white)); }
.alert-success { background: var(--fs-good-bg); color: var(--fs-good-ink); border: 1px solid color-mix(in srgb, var(--fs-good) 30%, var(--fs-white)); }
.alert button { background: none; border: 0; color: inherit; font: 700 15px var(--body); cursor: pointer; padding: 0 2px; }
.code-input { letter-spacing: .45em; font-family: var(--display) !important; font-weight: 800 !important; font-size: 22px !important; text-align: center; }
.resend { text-align: center; font-size: 14.5px; margin-top: var(--fs-s4); }
.resend a { cursor: pointer; }
.hp { position: absolute !important; left: -9999px; top: -9999px; }

/* Stage: navy panel with one visual */
.auth-stage {
  position: fixed; top: 0; right: 0; bottom: 0; width: var(--stage-w); color: var(--fs-on-dark); overflow: hidden; isolation: isolate;
  background:
    radial-gradient(60% 50% at 80% 10%, color-mix(in srgb, var(--fs-teal) 40%, transparent), transparent 70%),
    radial-gradient(50% 45% at 10% 95%, color-mix(in srgb, var(--fs-glow) 14%, transparent), transparent 70%),
    linear-gradient(160deg, var(--fs-navy-deep) 0%, var(--fs-navy) 55%, var(--fs-navy-light) 100%);
}
.auth-stage::before {
  content: ''; position: absolute; inset: 0; z-index: -1; opacity: .35;
  background-image: linear-gradient(color-mix(in srgb, var(--fs-glow) 8%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--fs-glow) 8%, transparent) 1px, transparent 1px);
  background-size: 44px 44px; -webkit-mask-image: radial-gradient(80% 70% at 60% 45%, #000, transparent); mask-image: radial-gradient(80% 70% at 60% 45%, #000, transparent);
}
.auth-stage-in { height: 100%; display: flex; flex-direction: column; justify-content: center; padding: 56px clamp(32px, 5vw, 72px); }
.auth-tag { font-family: var(--display); font-stretch: 118%; font-weight: 800; font-size: clamp(2rem, 3.3vw, 3.3rem); line-height: .98; letter-spacing: -.04em; color: var(--fs-white); max-width: 12ch; margin: 0 0 var(--fs-s7); }
.auth-visual { position: relative; height: 300px; max-width: 520px; }
.av-card { position: absolute; background: color-mix(in srgb, var(--fs-white) 96%, transparent); color: var(--fs-text); border-radius: var(--fs-r-lg); box-shadow: 0 24px 60px rgba(0, 0, 0, .35); }
.av-label { display: block; font-size: 13px; font-weight: 600; color: var(--muted); }
.av-count { left: 0; top: 40px; width: 55%; padding: var(--fs-s5) var(--fs-s5) var(--fs-s4); background: var(--fs-white); }
.av-num { display: block; font-family: var(--display); font-stretch: 118%; font-weight: 800; font-size: 3.2rem; letter-spacing: -.045em; line-height: 1; color: var(--navy-deep); margin: var(--fs-s2) 0 var(--fs-s2); font-variant-numeric: tabular-nums; }
.av-spark { display: block; width: 100%; height: 56px; }
.av-ping { display: flex; align-items: center; gap: var(--fs-s3); padding: var(--fs-s3) var(--fs-s4); font-size: 14px; white-space: nowrap; }
.av-ping b { color: var(--navy-deep); margin-right: var(--fs-s1); }
.av-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--fs-good); box-shadow: 0 0 0 5px color-mix(in srgb, var(--fs-good) 18%, transparent); flex: none; }
.av-ping-1 { right: 0; top: 0; }
.av-ping-2 { right: 0; top: 62px; }
.av-ping-2 .av-dot { background: var(--teal); box-shadow: 0 0 0 5px color-mix(in srgb, var(--fs-teal) 20%, transparent); }
.av-modes { right: 0; bottom: 0; width: 68%; padding: var(--fs-s4) var(--fs-s4); display: grid; gap: var(--fs-s3); }
.av-pills { display: flex; flex-wrap: wrap; gap: var(--fs-s2); }
.av-pills i { font-style: normal; font-size: 12.5px; font-weight: 700; padding: var(--fs-s2) var(--fs-s3); border-radius: var(--fs-r-pill); background: var(--fs-bg); color: var(--muted); }
.av-pills i.on { background: var(--navy-deep); color: var(--fs-white); }
.auth-foot { margin: var(--fs-s6) 0 0; font-size: 12.5px; color: color-mix(in srgb, var(--fs-on-dark-2) 75%, transparent); }
@media (prefers-reduced-motion: no-preference) {
  .av-ping { animation: av-in .6s cubic-bezier(.2, .7, .2, 1) both; }
  .av-ping-1 { animation-delay: .35s; } .av-ping-2 { animation-delay: .7s; }
  @keyframes av-in { from { opacity: 0; transform: translateY(10px) scale(.97); } }
}

/* Tablet and phone */
@media (max-width: 1024px) {
  :root { --stage-w: 40vw; }
  .auth-visual { transform: scale(.82); transform-origin: left center; }
}
@media (max-width: 820px) {
  .auth-stage { position: relative; width: auto; height: auto; }
  .auth-stage-in { padding: 96px var(--fs-s5) var(--fs-s5); }
  .auth-tag { font-size: 1.9rem; max-width: 14ch; margin-bottom: 0; }
  .auth-visual, .auth-foot { display: none; }
  .auth-wordmark { top: 24px; left: 20px; }
  .auth-wordmark .wm-f { color: var(--fs-white); }
  .auth-wordmark .wm-b { color: var(--glow); }
  .auth-panel { margin: 0; min-height: 0; padding: var(--fs-s6) var(--fs-s5) var(--fs-s7); display: block; }
  .auth-card { max-width: 480px; margin: 0 auto; }
  .auth-links { max-width: 480px; margin: var(--fs-s6) auto 0; display: grid; grid-template-columns: repeat(3, auto); justify-content: center; justify-items: center; }
}

/* Sign in with Furiosa (drawn only when the feature is switched on) */
.btn-furiosa { width: 100%; height: 52px; margin-bottom: var(--fs-s3); border-radius: var(--fs-r-pill); background: var(--navy-deep); color: var(--fs-white); font: 700 15px/1 var(--body); display: inline-flex; align-items: center; justify-content: center; gap: var(--fs-s3); transition: background .15s; }
.auth-card a.btn-furiosa { color: var(--fs-white); }
.auth-card a.btn-furiosa:hover { background: var(--navy); text-decoration: none; }
.btn-furiosa .orb { width: 22px; height: 22px; background: var(--fs-white); border-radius: 50%; }

/* Contrast pass: white text on the deeper teal (5.2:1). */
.btn-auth { background: var(--fs-btn); }
.btn-auth:hover { background: var(--fs-btn-hover); }
.btn-furiosa.is-waiting { opacity: .75; cursor: progress; }
#furiosa-refused-note { margin: 0 0 var(--fs-s3); }
.btn-furiosa.is-preview { cursor: not-allowed; }
.furiosa-preview-note { margin: -2px 0 var(--fs-s3); font-size: 13px; color: var(--muted); text-align: center; }

/* Headings break into even lines. */
.auth-v2 :where(h1, h2, h3) { text-wrap: balance; }