/* The shared account page: create an account, log in, reset a password, staff sign-in code. Builds on players.css. */
.main { padding-top: 32px; padding-bottom: 64px; }
.view.narrow { margin: 0 auto; width: 100%; max-width: 480px; gap: 20px; }
.view h1 { font-size: clamp(2rem, 6vw, 2.6rem); }

.kind-pick { display: grid; gap: 12px; }
.kind { display: flex; flex-direction: column; gap: 4px; text-align: left; padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--r);
  background: var(--surface); color: var(--ink); font: inherit; cursor: pointer; box-shadow: var(--shadow); }
.kind strong { font-family: var(--display); font-size: 1.4rem; letter-spacing: .02em; }
.kind span { color: var(--muted); }
.kind:hover { border-color: var(--accent); }

.providers { display: flex; flex-direction: column; gap: 16px; }
.providers[hidden] { display: none; }
.provider { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 12px 16px; font-size: 1rem; }
.g-mark { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #fff; color: #4285f4;
  border: 1px solid var(--line); font: 700 .85rem/1 Arial, sans-serif; }
.or { display: flex; align-items: center; gap: 12px; margin: 0; color: var(--muted); font-size: .85rem; }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--line); }

.form input[type="email"], .form input[type="password"], .form input:not([type]), .form input[inputmode] { font-size: 1rem; }
#c-code { font-family: var(--mono); font-size: 1.4rem; letter-spacing: .3em; max-width: 12ch; }

.qr { display: block; width: 200px; height: 200px; margin: 8px 0; padding: 10px; background: #fff; border-radius: 8px; border: 1px solid var(--line); }
#code-secret { word-break: break-all; }

@media (max-width: 480px) {
  .main { padding-top: 20px; }
  .kind { padding: 14px; }
}

/* Small print under a form (C2C-018) */
.fine { font-size: 0.85rem; }
/* Authenticator app setup for owners (C2C-030) */
.setup-steps { margin: 0 0 12px; padding-left: 1.3em; display: flex; flex-direction: column; gap: 6px; }
.setup-qr-wrap { background: #fff; border: 1px solid #dfe5e2; border-radius: 10px; padding: 10px; width: max-content; max-width: 100%; margin: 4px 0 10px; }
.setup-qr-wrap img { display: block; width: 180px; height: 180px; }
.setup-key { overflow-wrap: anywhere; word-break: break-all; font-size: .95rem; letter-spacing: .02em; }