// Sign-in screen — "Return to your archive". Full-bleed concrete vault entry.

function SignIn({ go, lang = 'en' }) {
  const ts = window.T[lang].signin;
  const [email, setEmail] = React.useState('');
  const [pass, setPass] = React.useState('');
  const [phase, setPhase] = React.useState('idle'); // idle | verifying | open | error
  const [googlePhase, setGooglePhase] = React.useState('idle'); // idle | connecting | open
  const [errorMsg, setErrorMsg] = React.useState('');
  const [isSignUp, setIsSignUp] = React.useState(false);
  const [time, setTime] = React.useState(new Date());

  React.useEffect(() => {
    const t = setInterval(() => setTime(new Date()), 1000);
    return () => clearInterval(t);
  }, []);

  const submit = async (e) => {
    e?.preventDefault();
    if (!email || !pass) return;
    setPhase('verifying');
    setErrorMsg('');
    try {
      if (isSignUp) {
        await window.auth.createUserWithEmailAndPassword(email, pass);
      } else {
        await window.auth.signInWithEmailAndPassword(email, pass);
      }
      setPhase('open');
      setTimeout(() => go('archive'), 900);
    } catch (err) {
      const msgs = {
        'auth/user-not-found': 'No account found. Try signing up instead.',
        'auth/wrong-password': 'Wrong passphrase.',
        'auth/email-already-in-use': 'Account exists. Sign in instead.',
        'auth/weak-password': 'Passphrase must be at least 6 characters.',
        'auth/invalid-email': 'Invalid email address.',
        'auth/invalid-credential': 'Wrong email or passphrase.',
      };
      setErrorMsg(msgs[err.code] || 'Something went wrong. Try again.');
      setPhase('error');
      setTimeout(() => setPhase('idle'), 2000);
    }
  };

  const signInWithGoogle = async () => {
    if (googlePhase !== 'idle') return;
    setGooglePhase('connecting');
    try {
      await window.auth.signInWithPopup(window.googleProvider);
      setGooglePhase('open');
      setTimeout(() => go('archive'), 800);
    } catch (err) {
      setGooglePhase('idle');
    }
  };

  const fmt = (d) => d.toUTCString().split(' ').slice(0, 4).join(' ') + ' · ' +
    d.toISOString().slice(11, 19) + ' GMT';

  return (
    <>
      <style>{SIGNIN_CSS}</style>
      <div className="signin-shell">
        {/* ── LEFT: the wall ───────────────────────────────────────────── */}
        <aside className="signin-wall">
          <div className="signin-wall-inner">
            <header className="signin-top">
              <div className="logo" onClick={() => go('landing')} style={{ color: 'var(--paper)' }}>
                <span className="letter">R</span>
                <span className="dot" style={{ background: 'var(--ice)' }} />
                <span className="letter">I</span>
                <span className="dot" style={{ background: 'var(--ice)' }} />
                <span className="letter">P</span>
                <span className="dot" style={{ background: 'var(--ice)' }} />
              </div>
              <span className="mono tiny upper" style={{ color: 'var(--ice)', letterSpacing: '0.32em' }}>
                {ts.vaultEntry}
              </span>
            </header>

            {/* The wireframe — a quiet rotating circle */}
            <div className="signin-wireframe" aria-hidden>
              <svg viewBox="0 0 400 400" width="100%" height="100%">
                <defs>
                  <radialGradient id="signinGlow" cx="50%" cy="50%" r="50%">
                    <stop offset="0%" stopColor="#BFECFF" stopOpacity="0.30" />
                    <stop offset="65%" stopColor="#BFECFF" stopOpacity="0" />
                  </radialGradient>
                </defs>
                <circle cx="200" cy="200" r="180" fill="url(#signinGlow)" />
                <circle cx="200" cy="200" r="196" fill="none" stroke="#6699CC" strokeWidth="0.8" opacity="0.85" />
                <g className="signin-rotor">
                  <circle cx="200" cy="200" r="140" fill="none" stroke="#BFECFF" strokeWidth="0.6" opacity="0.55" strokeDasharray="2 8" />
                  <circle cx="200" cy="60"  r="3" fill="#BFECFF" />
                  <circle cx="200" cy="340" r="2" fill="#6699CC" />
                </g>
                <g className="signin-rotor-slow">
                  <circle cx="200" cy="200" r="90" fill="none" stroke="#6699CC" strokeWidth="0.6" opacity="0.7" strokeDasharray="3 6" />
                  <circle cx="290" cy="200" r="2" fill="#BFECFF" />
                </g>
                <circle cx="200" cy="200" r="48" fill="none" stroke="#6699CC" strokeWidth="0.9" />
                <circle cx="200" cy="200" r="7" fill="#BFECFF" />
                <line x1="20" y1="200" x2="380" y2="200" stroke="#6699CC" strokeWidth="0.4" strokeDasharray="2 6" opacity="0.4" />
                <line x1="200" y1="20" x2="200" y2="380" stroke="#6699CC" strokeWidth="0.4" strokeDasharray="2 6" opacity="0.4" />
              </svg>
              <div className="signin-pulse" />
            </div>

            <div className="signin-quote">
              <span className="mono tiny upper" style={{ color: 'var(--ice)', letterSpacing: '0.32em' }}>
                § Keeper log
              </span>
              <p className="serif signin-quote-text">
                "Every time I sign in, I notice one more thing I have not given away."
              </p>
              <span className="mono tiny upper" style={{ color: 'rgba(239,239,237,0.5)', letterSpacing: '0.28em' }}>
                — H.M., Archive 04211
              </span>
            </div>

            <footer className="signin-foot">
              <span className="mono tiny upper" style={{ color: 'rgba(239,239,237,0.55)', letterSpacing: '0.28em' }}>
                System time
              </span>
              <span className="mono tiny upper" style={{ color: 'var(--frost)', letterSpacing: '0.22em' }}>
                {fmt(time)}
              </span>
            </footer>
          </div>
        </aside>

        {/* ── RIGHT: the form ──────────────────────────────────────────── */}
        <main className="signin-form-pane">
          <div className="signin-form-inner">

            <button className="signin-back" onClick={() => go('landing')}>
              <span aria-hidden>←</span> {ts.back}
            </button>

            <span className="mono tiny upper" style={{ color: 'var(--ice)', letterSpacing: '0.32em' }}>
              § 01 — Authenticate
            </span>
            <h1 className="display signin-title">
              {ts.title} <em className="serif">{ts.titleEm}</em>
            </h1>
            <p className="serif signin-sub">
              {ts.subtitle}
            </p>

            <form className="signin-form" onSubmit={submit}>
              <Field
                label={ts.emailLabel}
                hint={ts.emailHint}
                value={email}
                onChange={setEmail}
                placeholder="you@example.com"
                type="email"
                autoFocus
              />
              <Field
                label={ts.passLabel}
                hint={ts.passHint}
                value={pass}
                onChange={setPass}
                placeholder="· · · · · · · ·"
                type="password"
              />

              <div className="signin-row" style={{ marginTop: 24 }}>
                <label className="signin-check" onClick={() => setIsSignUp(s => !s)} style={{ cursor: 'pointer' }}>
                  <span className="signin-check-box" data-on={isSignUp ? '1' : '0'}><i /></span>
                  <span className="mono tiny upper" style={{ letterSpacing: '0.22em', color: 'var(--ink-2)' }}>
                    {ts.newArchive}
                  </span>
                </label>
              </div>

              {errorMsg && (
                <div className="mono tiny upper" style={{ color: '#c0392b', letterSpacing: '0.22em', marginTop: -8 }}>
                  {errorMsg}
                </div>
              )}

              <button type="submit" className={'signin-submit ' + phase}>
                <span className="signin-submit-bar" />
                <span className="signin-submit-label">
                  {phase === 'idle'      && (isSignUp ? ts.creating.replace('…','') : ts.breakSeal)}
                  {phase === 'verifying' && ts.verifying}
                  {phase === 'open'      && ts.open}
                  {phase === 'error'     && ts.error}
                </span>
                <span className="signin-submit-arrow" aria-hidden>→</span>
              </button>

              {/* Status receipt */}
              <div className="signin-receipt">
                <span className="mono tiny upper" style={{ color: 'var(--muted)', letterSpacing: '0.26em' }}>
                  Encrypted, end-to-end · Firebase Auth
                </span>
                <span className="mono tiny upper signin-receipt-id" style={{ letterSpacing: '0.26em' }}>
                  <span className="signin-pulse-dot" />
                  Notary online — A. Pereira
                </span>
              </div>
            </form>

            {/* ── Google sign-in ─────────────────────────────────────── */}
            <div className="signin-or">
              <span className="mono tiny upper" style={{ color: 'var(--muted)', letterSpacing: '0.28em', padding: '0 14px', background: 'var(--paper)' }}>or</span>
            </div>

            <button type="button" className={'signin-google ' + googlePhase} onClick={signInWithGoogle} disabled={googlePhase !== 'idle'}>
              <span className="signin-google-bar" />
              <span className="signin-google-icon" aria-hidden>
                {googlePhase === 'open' ? (
                  <svg viewBox="0 0 18 18" width="18" height="18"><path fill="currentColor" d="M9 1a8 8 0 1 0 0 16A8 8 0 0 0 9 1Zm3.6 8.8H9.6V12H8.4V9.8H6.2V8.6h2.2V6.4h1.2v2.2h2.2v1.2Z"/></svg>
                ) : (
                  <svg viewBox="0 0 18 18" width="18" height="18" fill="none">
                    <path d="M17.64 9.2c0-.637-.057-1.251-.164-1.84H9v3.481h4.844a4.14 4.14 0 0 1-1.796 2.716v2.259h2.908C16.658 14.118 17.64 11.81 17.64 9.2Z" fill="#4285F4"/>
                    <path d="M9 18c2.43 0 4.467-.806 5.956-2.18l-2.908-2.259c-.806.54-1.837.86-3.048.86-2.344 0-4.328-1.584-5.036-3.711H.957v2.332A8.997 8.997 0 0 0 9 18Z" fill="#34A853"/>
                    <path d="M3.964 10.71A5.41 5.41 0 0 1 3.682 9c0-.593.102-1.17.282-1.71V4.958H.957A8.996 8.996 0 0 0 0 9c0 1.452.348 2.827.957 4.042l3.007-2.332Z" fill="#FBBC05"/>
                    <path d="M9 3.58c1.321 0 2.508.454 3.44 1.345l2.582-2.58C13.463.891 11.426 0 9 0A8.997 8.997 0 0 0 .957 4.958L3.964 6.29C4.672 4.163 6.656 3.58 9 3.58Z" fill="#EA4335"/>
                  </svg>
                )}
              </span>
              <span className="signin-google-label">
                {googlePhase === 'idle'       && ts.continueGoogle}
                {googlePhase === 'connecting' && ts.connecting}
                {googlePhase === 'open'       && ts.authenticated}
              </span>
              <span className="signin-google-arrow" aria-hidden>→</span>
            </button>

            {/* Secondary entries */}
            <div className="signin-alt">
              <div className="signin-alt-row">
                <div>
                  <div className="mono tiny upper" style={{ color: 'var(--ice)', letterSpacing: '0.28em', marginBottom: 8 }}>
                    Beneficiary
                  </div>
                  <div className="serif" style={{ fontStyle: 'italic', fontSize: 15, color: 'var(--ink-2)', fontWeight: 300, lineHeight: 1.55 }}>
                    Did someone leave you a parcel? Open it with the seal code that came in the envelope.
                  </div>
                </div>
                <a className="signin-alt-link mono tiny upper" style={{ letterSpacing: '0.24em' }}>
                  Enter a seal code &nbsp;→
                </a>
              </div>
              <div className="signin-alt-row">
                <div>
                  <div className="mono tiny upper" style={{ color: 'var(--ice)', letterSpacing: '0.28em', marginBottom: 8 }}>
                    Notary
                  </div>
                  <div className="serif" style={{ fontStyle: 'italic', fontSize: 15, color: 'var(--ink-2)', fontWeight: 300, lineHeight: 1.55 }}>
                    Co-signing on behalf of a client? Authenticate with your registered chamber.
                  </div>
                </div>
                <a className="signin-alt-link mono tiny upper" style={{ letterSpacing: '0.24em' }}>
                  Chamber sign-in &nbsp;→
                </a>
              </div>
              <div className="signin-alt-row">
                <div>
                  <div className="mono tiny upper" style={{ color: 'var(--ice)', letterSpacing: '0.28em', marginBottom: 8 }}>
                    First time
                  </div>
                  <div className="serif" style={{ fontStyle: 'italic', fontSize: 15, color: 'var(--ink-2)', fontWeight: 300, lineHeight: 1.55 }}>
                    You can begin with a single object. It takes four minutes. Nothing is binding until you and the notary co-sign.
                  </div>
                </div>
                <a className="signin-alt-link mono tiny upper" onClick={() => go('archive')} style={{ letterSpacing: '0.24em', cursor: 'pointer' }}>
                  Begin a will &nbsp;→
                </a>
              </div>
            </div>

            <div className="signin-bottom">
              <span className="mono tiny upper" style={{ color: 'var(--muted)', letterSpacing: '0.26em' }}>
                R.I.P. House · Lisbon · Berlin · Mexico City
              </span>
              <span className="mono tiny upper" style={{ color: 'var(--muted)', letterSpacing: '0.26em' }}>
                Encrypted, end-to-end · § Article 14, EU 2024
              </span>
            </div>

          </div>
        </main>
      </div>
    </>
  );
}

// ── Field — bare line with floating label ───────────────────────────────
function Field({ label, hint, value, onChange, placeholder, type = 'text', inputMode, autoFocus, trailing }) {
  const [focus, setFocus] = React.useState(false);
  const filled = value && value.length > 0;
  return (
    <div className="signin-field">
      <div className="signin-field-head">
        <label className="mono tiny upper" style={{ color: focus ? 'var(--ice)' : 'var(--muted)', letterSpacing: '0.28em' }}>
          {label}
        </label>
        <span className="mono tiny upper" style={{ color: 'var(--muted)', letterSpacing: '0.22em', textAlign: 'right' }}>
          {hint}
        </span>
      </div>
      <div className="signin-field-row" data-focus={focus ? '1' : '0'} data-filled={filled ? '1' : '0'}>
        <input
          className="signin-input"
          value={value}
          onChange={(e) => onChange(e.target.value)}
          placeholder={placeholder}
          type={type}
          inputMode={inputMode}
          autoFocus={autoFocus}
          onFocus={() => setFocus(true)}
          onBlur={() => setFocus(false)}
        />
        {trailing}
      </div>
    </div>
  );
}

const SIGNIN_CSS = `
.signin-shell {
  position: fixed; inset: 0;
  display: grid; grid-template-columns: 1.05fr 1fr;
  background: var(--paper);
  color: var(--ink);
  overflow: auto;
  z-index: 5;
}

/* LEFT — the wall */
.signin-wall {
  position: relative;
  background:
    radial-gradient(120% 80% at 30% 20%, rgba(102,153,204,0.10), transparent 60%),
    linear-gradient(180deg, #0E0E0E 0%, #161616 100%);
  color: var(--paper);
  overflow: hidden;
}
.signin-wall::before {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(60% 50% at 50% 50%, transparent 0%, rgba(0,0,0,0.4) 100%);
  pointer-events: none;
}
.signin-wall::after {
  content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px;
  background: rgba(191,236,255,0.10);
}
.signin-wall-inner {
  position: relative; height: 100%;
  display: grid; grid-template-rows: auto 1fr auto auto;
  padding: 48px clamp(36px, 6vw, 80px);
  gap: 32px;
}
.signin-top {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.signin-top .logo { color: var(--paper); font-size: 24px; }

.signin-wireframe {
  position: relative;
  align-self: center; justify-self: center;
  width: clamp(280px, 36vw, 460px); aspect-ratio: 1;
}
.signin-rotor { transform-origin: 200px 200px; animation: signin-rot 60s linear infinite; }
.signin-rotor-slow { transform-origin: 200px 200px; animation: signin-rot 140s linear infinite reverse; }
@keyframes signin-rot { to { transform: rotate(360deg); } }
.signin-pulse {
  position: absolute; left: 50%; top: 50%;
  width: 22px; height: 22px; margin: -11px 0 0 -11px;
  border-radius: 50%;
  border: 1px solid rgba(191,236,255,0.6);
  animation: signin-pulse 2.6s ease-out infinite;
}
@keyframes signin-pulse {
  0%   { transform: scale(0.6); opacity: 0.9; }
  70%  { transform: scale(2.6); opacity: 0; }
  100% { transform: scale(2.6); opacity: 0; }
}

.signin-quote {
  display: flex; flex-direction: column; gap: 14px;
  max-width: 480px;
  border-top: 1px solid rgba(102,153,204,0.3);
  padding-top: 24px;
}
.signin-quote-text {
  font-size: clamp(20px, 2vw, 26px);
  line-height: 1.45;
  color: rgba(239,239,237,0.88);
  font-weight: 300;
  font-style: italic;
  margin: 0;
}

.signin-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding-top: 16px;
  border-top: 1px solid rgba(239,239,237,0.12);
}

/* RIGHT — the form */
.signin-form-pane {
  position: relative;
  background: var(--paper);
  display: grid;
  align-items: start;
  padding: 64px clamp(36px, 6vw, 96px);
  overflow: auto;
}
.signin-form-inner {
  width: 100%; max-width: 540px;
  display: flex; flex-direction: column; gap: 32px;
  position: relative;
}
.signin-back {
  position: absolute; top: -32px; left: 0;
  background: transparent; border: none; cursor: pointer;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--muted); padding: 4px 0;
  display: inline-flex; align-items: center; gap: 8px;
}
.signin-back:hover { color: var(--ice); }

.signin-title {
  font-size: clamp(40px, 5vw, 68px);
  margin: 8px 0 0;
  line-height: 1;
  letter-spacing: -0.03em;
}
.signin-title em {
  font-style: italic; font-weight: 300; color: var(--ice);
  font-family: 'Fraunces', serif;
}
.signin-sub {
  font-size: 16px; line-height: 1.6; color: var(--ink-2);
  max-width: 460px; margin: 0; font-weight: 300;
}

.signin-form {
  display: flex; flex-direction: column; gap: 24px;
  margin-top: 8px;
}

/* fields */
.signin-field { display: flex; flex-direction: column; gap: 10px; }
.signin-field-head {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
}
.signin-field-row {
  display: flex; align-items: center; gap: 12px;
  border-bottom: 1px solid var(--rule);
  padding: 8px 0 12px;
  transition: border-color 0.2s ease;
}
.signin-field-row[data-focus="1"] { border-color: var(--ice); }
.signin-field-row[data-filled="1"] { border-color: var(--ink); }
.signin-input {
  flex: 1; min-width: 0;
  border: none; outline: none; background: transparent;
  font-family: 'Archivo', sans-serif;
  font-size: 22px; font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--ink);
  padding: 0;
}
.signin-input::placeholder {
  color: rgba(17,17,17,0.22);
  letter-spacing: 0.15em;
}
.signin-reveal {
  background: transparent; border: none; cursor: pointer;
  color: var(--ice); padding: 4px 8px;
  letter-spacing: 0.24em; font-size: 10px; text-transform: uppercase;
}
.signin-reveal:hover { color: var(--ink); }

/* row: keep me + forgot */
.signin-row {
  display: flex; justify-content: space-between; align-items: center;
  gap: 24px; flex-wrap: wrap;
}
.signin-check {
  display: inline-flex; align-items: center; gap: 12px; cursor: pointer;
}
.signin-check-box {
  width: 16px; height: 16px;
  border: 1px solid var(--ink);
  position: relative;
  background: transparent;
  display: inline-block;
}
.signin-check-box[data-on="1"]::after {
  content: ''; position: absolute;
  left: 3px; top: 3px; right: 3px; bottom: 3px;
  background: var(--ice);
}
.signin-link { color: var(--ice); cursor: pointer; }
.signin-link:hover { color: var(--ink); }

/* the submit — a big horizontal bar that fills on hover */
.signin-submit {
  position: relative;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  background: var(--ink); color: var(--paper);
  border: 1px solid var(--ink); cursor: pointer;
  padding: 22px 24px;
  font-family: 'Archivo', sans-serif;
  font-size: 12px; letter-spacing: 0.32em; text-transform: uppercase;
  font-weight: 500;
  overflow: hidden;
  transition: padding 0.2s ease;
  margin-top: 8px;
}
.signin-submit-bar {
  position: absolute; inset: 0 100% 0 0;
  background: linear-gradient(90deg, #1f2a36, #3D4550);
  transition: inset 0.4s cubic-bezier(0.7, 0, 0.3, 1);
}
.signin-submit:hover .signin-submit-bar { inset: 0; }
.signin-submit.verifying .signin-submit-bar {
  inset: 0;
  background: linear-gradient(90deg, #3D4550, #6699CC, #3D4550);
  background-size: 200% 100%;
  animation: signin-shimmer 1.2s linear infinite;
}
.signin-submit.open .signin-submit-bar {
  inset: 0;
  background: linear-gradient(90deg, #6699CC, #BFECFF);
}
@keyframes signin-shimmer {
  from { background-position: 0% 0; }
  to   { background-position: 200% 0; }
}
.signin-submit-label { position: relative; z-index: 1; }
.signin-submit-arrow { position: relative; z-index: 1; font-size: 16px; }
.signin-submit.open { color: var(--ink); }

/* receipt strip */
.signin-receipt {
  display: flex; justify-content: space-between; align-items: center;
  gap: 16px; flex-wrap: wrap;
  padding-top: 14px;
  border-top: 1px dotted var(--hairline);
}
.signin-receipt-id { color: var(--ink); display: inline-flex; align-items: center; gap: 10px; }
.signin-pulse-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--ice);
  box-shadow: 0 0 0 0 rgba(102,153,204,0.6);
  animation: signin-dot-pulse 2s ease-in-out infinite;
}
@keyframes signin-dot-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(102,153,204,0.55); }
  50%      { box-shadow: 0 0 0 8px rgba(102,153,204,0); }
}

/* ── or divider ─────────────────────────────────────────────────────────── */
.signin-or {
  display: flex; align-items: center;
  margin: -8px 0;
}
.signin-or::before, .signin-or::after {
  content: ''; flex: 1; height: 1px; background: var(--hairline);
}

/* ── Google button ───────────────────────────────────────────────────────── */
.signin-google {
  position: relative;
  display: flex; align-items: center; gap: 14px;
  width: 100%;
  padding: 16px 24px;
  background: var(--paper);
  border: 1px solid var(--hairline);
  cursor: pointer;
  font-family: 'Archivo', sans-serif;
  font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase; font-weight: 500;
  color: var(--ink);
  overflow: hidden;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.signin-google:hover:not(:disabled) { border-color: var(--ice); }
.signin-google.connecting { border-color: var(--ice); cursor: default; }
.signin-google.open { border-color: var(--ice); color: var(--ice); }
.signin-google:disabled { cursor: default; }
.signin-google-bar {
  position: absolute; inset: 0 100% 0 0;
  background: linear-gradient(90deg, rgba(102,153,204,0.08), rgba(191,236,255,0.15));
  transition: inset 0.45s cubic-bezier(0.7, 0, 0.3, 1);
}
.signin-google.connecting .signin-google-bar,
.signin-google.open .signin-google-bar { inset: 0; }
.signin-google-icon {
  position: relative; z-index: 1;
  display: inline-flex; align-items: center; flex-shrink: 0;
}
.signin-google-label { position: relative; z-index: 1; flex: 1; text-align: left; }
.signin-google-arrow { position: relative; z-index: 1; font-size: 16px; margin-left: auto; }

/* alt entries */
.signin-alt {
  display: flex; flex-direction: column;
  border-top: 1px solid var(--rule);
  margin-top: 24px;
}
.signin-alt-row {
  display: grid; grid-template-columns: 1fr auto;
  gap: 32px;
  align-items: center;
  padding: 24px 0;
  border-bottom: 1px solid var(--hairline);
}
.signin-alt-link {
  color: var(--ink-2); white-space: nowrap;
  border-bottom: 1px solid var(--hairline);
  padding-bottom: 4px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.signin-alt-link:hover { color: var(--ice); border-color: var(--ice); }

.signin-bottom {
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  padding-top: 16px; margin-top: 8px;
}

/* ── RWD ─────────────────────────────────────────────────────────────── */
@media (max-width: 960px) {
  .signin-shell {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
    position: static;
  }
  .signin-wall {
    min-height: 60vh;
  }
  .signin-wall-inner {
    grid-template-rows: auto 1fr auto auto;
    padding: 40px 32px 48px;
    gap: 28px;
  }
  .signin-form-pane {
    padding: 56px 32px 72px;
  }
  .signin-form-inner { max-width: 100%; }
  .signin-back { top: -24px; }
  .signin-field-head { flex-direction: column; gap: 4px; align-items: flex-start; }
}

@media (max-width: 600px) {
  .signin-wall {
    min-height: 380px;
  }
  .signin-wall-inner {
    padding: 28px 24px 36px;
    gap: 22px;
  }
  .signin-quote-text { font-size: 18px; }
  .signin-form-pane { padding: 40px 24px 56px; }
  .signin-input { font-size: 18px; }
  .signin-title { font-size: 36px; }
  .signin-row { gap: 14px; }
  .signin-alt-row {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .signin-alt-link {
    justify-self: start;
  }
  .signin-foot, .signin-bottom, .signin-receipt {
    flex-direction: column; align-items: flex-start; gap: 10px;
  }
  .signin-submit { padding: 18px 20px; font-size: 11px; letter-spacing: 0.28em; }
  .signin-wireframe { width: 220px; }
  .signin-field-head { flex-direction: column; gap: 4px; align-items: flex-start; }
}
`;

Object.assign(window, { SignIn });