/* Sign in: one centred card, three ways in. Tokens only — see app.css. */
.signin-main{display:flex;flex-direction:column;align-items:center;padding-top:36px;padding-bottom:48px}
.si-card{width:100%;max-width:440px;background:var(--pane);border:1px solid var(--rule);border-radius:var(--r);
  box-shadow:var(--shadow);padding:28px}
@media(max-width:480px){.si-card{padding:20px}}

.si-head{margin:0 0 20px}
.si-head h1{margin:0 0 8px;font-size:23px;line-height:1.25;letter-spacing:-.01em}
.si-lede{margin:0;color:var(--ink-2);line-height:1.5}

.si-notice{margin:0 0 18px;padding:12px 14px;border-radius:var(--r-sm);
  background:color-mix(in srgb,var(--violet) 12%,var(--pane));
  border:1px solid color-mix(in srgb,var(--violet) 35%,var(--rule));
  color:var(--ink);font-size:14px;line-height:1.5}

/* The Terms agreement. Unticked, every way in is visibly off; the note says
   why when someone tries one anyway. */
.si-terms{margin:0 0 16px}
.si-agree{display:flex;gap:10px;align-items:flex-start;font-size:14px;line-height:1.5;color:var(--ink);cursor:pointer}
.si-agree input{flex:none;width:18px;height:18px;margin:2px 0 0;accent-color:var(--violet-fill);cursor:pointer}
.si-agree input:focus-visible{outline:2px solid var(--violet);outline-offset:2px}
.si-agree a{color:var(--violet);text-decoration:underline;text-underline-offset:2px}
.si-terms-note{margin:8px 0 0;padding:8px 12px;border-radius:var(--r-sm);font-size:13px;line-height:1.5;color:var(--ink);
  background:color-mix(in srgb,var(--violet) 12%,var(--pane));border:1px solid color-mix(in srgb,var(--violet) 35%,var(--rule))}
.si-provider[aria-disabled="true"]{opacity:.5;cursor:not-allowed}
.si-provider[aria-disabled="true"]:hover{border-color:var(--rule)}
.si-primary:disabled,.si-primary:disabled:hover{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none;
  background:var(--violet-fill);border-color:var(--violet-fill)}

.si-providers{display:grid;gap:10px;margin:0 0 20px}
.si-provider{display:flex;align-items:center;justify-content:center;gap:10px;height:46px;
  border:1px solid var(--rule);border-radius:var(--r-sm);background:var(--pane-2);color:var(--ink);
  font-weight:600;font-size:15px;text-decoration:none}
.si-provider:hover,.si-provider:focus-visible{border-color:var(--violet)}
.si-provider svg{flex:none}
.si-discord svg{color:#5865F2}

.si-divider{display:flex;align-items:center;gap:12px;margin:4px 0 0;color:var(--ink-3);font-size:13px}
.si-divider::before,.si-divider::after{content:'';flex:1;height:1px;background:var(--rule)}

.si-form{display:grid;gap:14px}
.si-form label{display:block;font-size:13px;font-weight:600;color:var(--ink-2)}
.si-form input{display:block;width:100%;margin-top:6px;font:inherit;font-size:15px;padding:12px 14px;
  box-sizing:border-box;border-radius:var(--r-sm);background:var(--paper);color:var(--ink);
  border:1px solid var(--rule)}
.si-form input:focus-visible{outline:2px solid var(--violet);outline-offset:1px;border-color:var(--violet)}

.si-names{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media(max-width:400px){.si-names{grid-template-columns:1fr}}

.si-hint,.si-fine{margin:0;font-size:13px;color:var(--ink-3);line-height:1.5}

.si-primary{width:100%}

#sicode{font-size:24px;letter-spacing:.3em;text-align:center}

.si-step{margin:0 0 6px;font-size:18px}

.si-actions{margin:2px 0 0;font-size:13px;color:var(--ink-3);text-align:center}
.si-link{display:inline;padding:0;background:none;border:0;color:var(--violet);font:inherit;font-size:13px;
  cursor:pointer;text-decoration:none}
.si-link:hover,.si-link:focus-visible{text-decoration:underline}

.si-browse{max-width:440px;text-align:center;margin:18px auto 0}

#siout .empty{padding:0;text-align:left;margin:0}
#siout .si-fine{margin-top:4px}