/* Sign-in and invite pages.
   One fluid scale: everything is sized in em from the body, and the body grows with the viewport
   (15px on a phone, ~16px on a laptop, ~20px at 1920), so proportions hold at every size instead of a
   fixed 380px form floating in a huge panel.

   Proportion: headline : wordmark is about 1 : 3, form heading 1 : 1 with the headline, controls 3.3em tall.
   Motion: one entrance of about a second (header, headline, wordmark, then the form),
   quiet interaction states, and a single idle detail: the blinking full stop of "huddlr.". */

* { box-sizing: border-box; }
:root { --ease: cubic-bezier(.2, 0, 0, 1); --amber: #f2b53c; --ink: #0a2540; }

body.auth-page {
  margin: 0; min-height: 100vh; min-height: 100dvh;
  display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
  font: 400 1em/1.5 var(--ctx-font-sans); font-size: clamp(9px, min(calc(10px + .5vw), 2.3vh), 21px);
  color: var(--ctx-text); background: var(--ctx-bg);
}

/* ── Story panel ─────────────────────────────────────────────────────────── */
.auth-story { position: relative; overflow: hidden; display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; padding: 2.2em 3.2em 1.8em; background: var(--fp-rail); color: #eef6f7; }
.auth-story > .auth-story-brand, .auth-story > .auth-story-main, .auth-story > .auth-story-footer { position: relative; z-index: 1; }
/* Light, not shapes: a static amber sun and turquoise glow, plus a third glow under the cursor (set by app.js) that shifts from amber to turquoise as it moves down the panel */
.auth-story { background: radial-gradient(circle 16em at calc(var(--gx, .5) * 100%) calc(var(--gy, .5) * 100%), rgba(var(--gc, 242, 181, 60), calc(var(--ga, 0) * .42)), transparent), radial-gradient(34% 34% at 88% 14%, rgba(242, 181, 60, .5), transparent 72%), radial-gradient(60% 55% at 12% 108%, rgba(0, 198, 200, .5), transparent 70%), var(--fp-rail); }
.auth-story::after { content: ""; position: absolute; z-index: 0; right: -14em; top: -14em; width: 38em; height: 38em; border-radius: 50%; border: 1px solid rgba(242, 181, 60, .35); pointer-events: none; }

.auth-story-brand { display: flex; align-items: center; justify-content: space-between; gap: 1.5em; padding-bottom: 1.3em; border-bottom: 1px solid var(--fp-rail-line); }
.auth-lockup { display: inline-flex; align-items: center; gap: .4em; font-size: 1.85em; font-weight: 700; letter-spacing: -.03em; text-transform: lowercase; color: #fff; }
.auth-mark { flex: none; width: 1.4em; height: 1.4em; overflow: visible; }
.auth-mark .m-tile { fill: #eef4f7; }
.auth-mark .m-s { fill: var(--ink); transform-box: fill-box; transform-origin: 50% 100%; }
.auth-mark .m-dot { fill: var(--amber); transform-box: fill-box; transform-origin: 50% 50%; }
.auth-lockup-text b, .weight-word b { color: var(--amber); font-weight: inherit; }
.auth-lockup-text i, .weight-word i { display: inline-block; font-style: normal; }
.auth-lockup-text b, .weight-word b { display: inline-block; transform-origin: 50% 82%; }

/* ComputexITy: the short CX mark, a link to computexity.com, centred on the lockup */
.auth-parent { display: inline-flex; align-items: center; justify-content: center; flex: none; height: 2.75em; padding: 0 .75em; border-radius: .5em; transition: background 140ms ease, transform 140ms var(--ease); }
.auth-parent img { display: block; height: 1.6em; width: auto; }
.auth-parent:hover { background: rgba(255, 255, 255, .09); }
.auth-parent:active { transform: scale(.96); }
.auth-parent:focus-visible, .auth-story-footer a:focus-visible { outline: 3px solid var(--ctx-focus-ring, #fff); outline-offset: 2px; }

.auth-story-main { flex: 1; display: flex; flex-direction: column; justify-content: space-between; gap: 2.4em; padding: 3.4em 0 1.6em; }
.auth-story h2 { margin: 0 0 .5em; max-width: 14ch; font-size: 2.9em; line-height: 1.06; font-weight: 300; letter-spacing: -.035em; }
.auth-story h2 strong { font-weight: 800; letter-spacing: -.045em; }
.auth-story p { margin: 0; max-width: 30em; color: #b9d0dc; font-size: 1.1em; line-height: 1.6; }
.auth-ladder { margin: auto 0 0; }
.weight-word { display: block; font-size: 9.2em; line-height: .88; font-weight: 800; letter-spacing: -.05em; color: #fff; }

.auth-story-footer { padding-top: 1.1em; border-top: 1px solid var(--fp-rail-line); color: #b9d0dc; font-size: .8em; letter-spacing: .04em; }
.auth-story-footer a { color: inherit; text-decoration: underline; text-decoration-color: rgba(185, 208, 220, .45); text-underline-offset: 3px; transition: color 140ms, text-decoration-color 140ms; }
.auth-story-footer a:hover { color: #fff; text-decoration-color: var(--amber); }


/* ── Form panel ──────────────────────────────────────────────────────────── */
.auth-form-panel { display: flex; align-items: center; justify-content: center; padding: 3em; background: var(--ctx-bg); transition: opacity 240ms var(--ease), transform 240ms var(--ease); }
body.is-leaving .auth-form-panel { opacity: 0; transform: translateY(-.5em); }
.card { width: 100%; max-width: 26em; }
.card picture { display: none; }

.card h1 { margin: 0 0 .45em; font-size: 2.7em; line-height: 1.08; font-weight: 300; letter-spacing: -.035em; }
.card h1 strong { font-weight: 800; letter-spacing: -.045em; }
.card h1 .stop { font-style: normal; font-weight: 800; color: var(--amber); }
.card h1::after { content: ""; display: block; width: 1.3em; height: 3px; margin-top: .4em; border-radius: 2px; background: var(--amber); transform-origin: 0 50%; }
.card > p { margin: 0 0 1.9em; color: var(--ctx-text-muted); font-size: 1em; line-height: 1.6; }

.field { margin-bottom: 1.15em; }
label { display: block; margin-bottom: .5em; color: var(--ctx-text-muted); font-size: .78em; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; transition: color 160ms; }
.field:focus-within label { color: var(--ctx-text); }
input { width: 100%; height: 3.3em; padding: 0 1em; border: 1px solid color-mix(in srgb, var(--ctx-text) 30%, transparent); border-radius: .5em; background: var(--ctx-bg); color: var(--ctx-text); font: inherit; transition: border-color 160ms var(--ease), box-shadow 160ms var(--ease); }
input:hover { border-color: color-mix(in srgb, var(--ctx-text) 65%, transparent); }
input:focus, input:focus-visible { border-color: var(--ctx-text); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--amber) 38%, transparent); }
input[aria-invalid="true"] { border-color: var(--ctx-danger); }
.password-wrap { position: relative; }
.password-wrap input { padding-right: 3.4em; }
#login-form .password-wrap .password-reveal { all: unset; box-sizing: border-box; position: absolute; right: .45em; top: 50%; display: grid; place-items: center; width: 2.4em; height: 2.4em; border-radius: .45em; color: var(--ctx-text-muted); cursor: pointer; transform: translateY(-50%); transition: color 120ms, background 120ms; }
#login-form .password-wrap .password-reveal:hover { color: var(--ctx-text); background: color-mix(in srgb, var(--ctx-text) 9%, transparent); }
#login-form .password-wrap .password-reveal:focus-visible { outline: 2px solid var(--ctx-text); outline-offset: 0; }
#login-form .password-reveal .eye-off, #login-form .password-reveal[aria-pressed="true"] .eye { display: none; }
#login-form .password-reveal[aria-pressed="true"] .eye-off { display: block; }

.card button[type="submit"] { position: relative; overflow: hidden; width: 100%; height: 3.3em; margin-top: .7em; border: 0; border-radius: .5em; background: var(--amber); color: var(--ink); font: inherit; font-weight: 600; box-shadow: 0 1px 0 rgba(10, 37, 64, .22); cursor: pointer; transition: background 140ms ease, transform 140ms var(--ease); }
.card button[type="submit"]:hover:not(:disabled) { background: color-mix(in srgb, var(--amber) 84%, #fff); }
.card button[type="submit"]:active:not(:disabled) { transform: scale(.985); }
.card button[type="submit"]:focus-visible { outline: 3px solid var(--ctx-focus-ring); outline-offset: 3px; }
.card button[type="submit"]:disabled { cursor: progress; opacity: .85; }
.card p.auth-footer { display: flex; align-items: center; justify-content: center; gap: .5em; margin: 1.8em 0 0; color: var(--ctx-text-muted); font-size: .8em; }
.auth-lock { flex: none; opacity: .8; }
#error, #missing-token { display: none; margin-bottom: 1.1em; padding: .9em 1em; border-radius: .5em; background: var(--ctx-danger-bg); color: var(--ctx-danger); font-size: .9em; line-height: 1.55; }
.hint { margin-top: .6em; color: var(--ctx-text-muted); font-size: .8em; }

@media (min-width: 961px) and (max-height: 400px) { .auth-story h2, .auth-story p { display: none; } .auth-story-main { padding-top: 1.4em; } }

/* ── Narrower screens ────────────────────────────────────────────────────── */
@media (max-width: 960px) {
  body.auth-page { display: flex; flex-direction: column; }
  .auth-story { min-height: 0; padding: 1.4em 1.6em 1.2em; }
  .auth-story-brand { padding-bottom: 1.2em; }
  .auth-story-main { padding: 1.4em 0 0; gap: 0; }
  .auth-story h2, .auth-story p, .auth-story-footer { display: none; }
  .weight-word { font-size: 5.2em; }
  .auth-lockup-text { display: none; } /* the big word below carries the name here */
  .auth-lockup { font-size: 2em; }
  .auth-form-panel { flex: 1; align-items: flex-start; padding: 2.2em 1.6em 3em; }
}
@media (max-width: 650px) {
  .auth-story { padding: 1em 1.2em; }
  .auth-story-brand { padding-bottom: 0; border: 0; }
  .auth-story-main { display: none; }
  .auth-lockup-text { display: inline; }
  .auth-lockup { font-size: 1.6em; }
  .auth-parent { height: 2.5em; padding: 0 .6em; }
  .auth-parent img { height: 1.35em; }
  .auth-form-panel { padding: 1.6em 1.2em 2.4em; }
  .card h1 { font-size: 2.3em; }
}

/* ── Motion ──────────────────────────────────────────────────────────────── */
@keyframes rise { from { opacity: 0; transform: translateY(.6em); } }
@keyframes fade { from { opacity: 0; } }
@keyframes stem-grow { from { transform: scaleY(0); } }
@keyframes letter-in { from { opacity: 0; transform: translateX(-.16em); } }
@keyframes dot-pop { 0% { opacity: 0; transform: scale(0); } 55% { opacity: 1; transform: scale(1.5); } 78% { transform: scale(.88); } 100% { opacity: 1; transform: scale(1); } }
@keyframes mark-dot-pop { 0% { opacity: 0; transform: scale(0); } 55% { opacity: 1; transform: scale(1.6); } 78% { transform: scale(.88); } 100% { opacity: 1; transform: scale(1); } }
@keyframes weight-in { from { font-weight: 200; } }
@keyframes bar-draw { from { transform: scaleX(0); } }
@keyframes dot-blink { 0%, 62% { opacity: 1; } 72% { opacity: .08; } 84%, 100% { opacity: 1; } }
@keyframes stem-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
@keyframes busy-sweep { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
@keyframes glow-in { from { opacity: 0; } }
@keyframes shake { 10%, 90% { transform: translateX(-2px); } 20%, 80% { transform: translateX(4px); } 30%, 50%, 70% { transform: translateX(-6px); } 40%, 60% { transform: translateX(6px); } }

@media (prefers-reduced-motion: no-preference) {
  /* the entrance: backdrop, header, headline, wordmark, then the form (about a second in all) */
  .auth-story-brand { animation: fade 400ms ease both; }
  .auth-story::after { animation: glow-in 1.6s ease-out 200ms both; }
  .auth-lockup-text i { animation: letter-in 360ms var(--ease) both; animation-delay: calc(160ms + var(--i) * 50ms); }
  .auth-lockup-text b { animation: dot-pop 520ms cubic-bezier(.3, 0, .2, 1) 500ms both, dot-blink 2s ease-in-out 1.5s infinite; }
  .auth-mark .m-s { animation: stem-grow 480ms var(--ease) both; }
  .auth-mark .m-s1 { animation-delay: 80ms; }
  .auth-mark .m-s2 { animation-delay: 160ms; }
  .auth-mark .m-s3 { animation-delay: 240ms; }
  .auth-mark .m-dot { animation: mark-dot-pop 520ms cubic-bezier(.3, 0, .2, 1) 420ms both; }
  .auth-story h2 { animation: rise 520ms var(--ease) 140ms both; }
  .auth-story h2 strong { animation: weight-in 1.1s var(--ease) 360ms both; }
  .auth-story p { animation: rise 520ms var(--ease) 260ms both; }
  .weight-word i { animation: letter-in 520ms var(--ease) both; animation-delay: calc(320ms + var(--i) * 60ms); }
  .weight-word b { animation: dot-pop 620ms cubic-bezier(.3, 0, .2, 1) 780ms both, dot-blink 2s ease-in-out 1.7s infinite; }
  .card h1 { animation: rise 520ms var(--ease) 180ms both; }
  .card h1 strong { animation: weight-in 1s var(--ease) 380ms both; }
  .card h1::after { animation: bar-draw 700ms var(--ease) 480ms both; }
  .card > p { animation: rise 520ms var(--ease) 260ms both; }
  .field:nth-of-type(1) { animation: rise 480ms var(--ease) 340ms both; }
  .field:nth-of-type(2) { animation: rise 480ms var(--ease) 400ms both; }
  .card button[type="submit"] { animation: rise 480ms var(--ease) 470ms both; }
  .card p.auth-footer { animation: fade 500ms ease 620ms both; }
  /* a rejected sign-in shakes the fields, not the page */
  #error { animation: rise 260ms var(--ease) both; }
  .card:has(#error[style*="block"]) .field { animation: shake 360ms cubic-bezier(.36, .07, .19, .97); }
  /* working: the stems breathe and a light sweeps the button */
  body.is-busy .auth-mark .m-s { animation: stem-pulse 900ms ease-in-out infinite; animation-delay: 0ms; }
  body.is-busy .card button[type="submit"]::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .45), transparent); animation: busy-sweep 1.1s ease-in-out infinite; }
  body.is-leaving .auth-story { opacity: 0; transition: opacity 240ms var(--ease); }
}