/* Shared by /signin/ and /signup/. Two pages, one layout: the only real
   difference between them is what they promise. */

body{min-height:100dvh;display:flex;flex-direction:column}
.nav .alt{font-size:13.5px;color:var(--muted)}
.nav .alt a{font-weight:600}
@media (max-width:520px){ .nav .alt{font-size:12.5px} }

.auth{flex:1;display:flex;flex-direction:column;align-items:center;
      justify-content:center;padding:36px 24px 70px;gap:18px}

.card{width:100%;max-width:394px;background:var(--panel);
      border:1px solid var(--border);border-radius:var(--r-xl);
      box-shadow:var(--shadow-lg);padding:30px 28px 26px;text-align:center}

.mark.big{width:46px;height:46px;border-radius:13px;font-size:17px;
          margin:0 auto 16px;display:grid;place-items:center;color:#fff;
          background:linear-gradient(140deg,var(--accent),#7c5cff);
          font-family:var(--mono);font-weight:700}

.card h1{font-size:23px;letter-spacing:-.025em;margin:0 0 6px}
.card .lead{color:var(--muted);font-size:14.5px;margin:0 0 24px;line-height:1.55}

.why{margin:0 0 24px;padding:0;list-style:none;display:flex;
     flex-direction:column;gap:12px;text-align:left}
.why li{display:flex;gap:11px;font-size:13.5px;color:var(--muted);line-height:1.5}
.why svg{width:16px;height:16px;flex:none;margin-top:2px;color:var(--accent)}
.why b{color:var(--text);font-weight:650}

.gbtn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;
      font:600 15px var(--sans);padding:12px;border-radius:var(--r);cursor:pointer;
      background:var(--panel);color:var(--text);border:1px solid var(--border-strong);
      transition:background .13s,border-color .13s}
.gbtn:hover{background:var(--panel-2);border-color:var(--faint)}
.gbtn svg{width:18px;height:18px;flex:none}
.gbtn:disabled{opacity:.5;cursor:progress}

.or{display:flex;align-items:center;gap:12px;margin:18px 0;
    font:600 10.5px var(--sans);letter-spacing:.1em;text-transform:uppercase;
    color:var(--faint)}
.or::before,.or::after{content:"";flex:1;height:1px;background:var(--border)}

.card form{text-align:left}

.note{font-size:13.5px;line-height:1.6;border-radius:var(--r-md);padding:11px 13px;
      margin-top:16px;text-align:left}
.note.ok{background:var(--ok-bg);color:var(--ok);border:1px solid var(--ok-line)}
.note.bad{background:var(--bad-bg);color:var(--bad);border:1px solid var(--bad-line)}
.note[hidden]{display:none}

.card .foot{margin:22px 0 0;font-size:13px;color:var(--faint);line-height:1.6}

.aside{max-width:394px;text-align:center;font-size:12.5px;color:var(--faint);
       line-height:1.6;margin:0}