/* Sign-in, sign-up and account pages. Uses the tokens of app.css. */
.account-shell { min-height: 100vh; display: flex; flex-direction: column; }
.account-shell .button-topbar { flex: none; }
.account-shell .topbar-context a { color: var(--accent); }
.account-page { width: 100%; max-width: 460px; margin: 0 auto; padding: 40px 18px 56px; display: flex; flex-direction: column; gap: 20px; }
.account-page.wide { max-width: 720px; }
.account-page h1 { font-size: 30px; }
.account-page h2 { font-size: 20px; }

.form { display: flex; flex-direction: column; gap: 14px; }
.form .field label { font-size: 13px; color: var(--ink-2); }
.form .hint { font-size: 13px; color: var(--ink-2); }
.form input[type="text"], .form input[type="email"], .form input[type="password"] {
  min-height: 44px; width: 100%; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: 6px;
  font: inherit; background: var(--surface); color: var(--ink);
}
.form input.code { font-family: var(--mono); font-size: 20px; letter-spacing: 0.12em; }
.form .btn { align-self: flex-start; }
.btn-wide, .form .btn-wide { align-self: stretch; }
.btn-plain { border: none; background: none; padding: 0; min-height: 0; color: var(--accent); font: inherit; cursor: pointer; text-decoration: underline; }
.btn-plain:hover { color: var(--accent-ink); }

.or { display: flex; align-items: center; gap: 12px; color: var(--ink-2); font-size: 13px; }
.or::before, .or::after { content: ""; flex: 1; border-top: 1px solid var(--line); }

.message { border-radius: 8px; padding: 10px 14px; border: 1px solid var(--line); background: var(--surface); }
.message-error { background: var(--warn-bg); border-color: var(--warn-line); color: #4A2800; }
.message-ok { background: var(--info-bg); border-color: var(--info-bg); color: var(--info-ink); }

.qr { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; }
.qr img { width: 200px; height: 200px; background: #fff; border: 1px solid var(--line); border-radius: 8px; }
.secret { font-family: var(--mono); font-size: 15px; overflow-wrap: anywhere; }
.codes { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 8px 16px; font-family: var(--mono); font-size: 15px; }
.rows { margin: 0; display: grid; grid-template-columns: minmax(120px, max-content) 1fr; gap: 8px 20px; }
.rows dt { color: var(--ink-2); }
.rows dd { margin: 0; overflow-wrap: anywhere; }
.inline { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; }
.inline .field { flex: 1 1 200px; }
.form .inline .btn { align-self: flex-end; }

/* Account settings and entitlement details are separate, read-only views. */
.account-views { display: flex; flex-wrap: wrap; gap: 12px; border-bottom: 1px solid var(--line); padding-bottom: 10px; }
.account-views a { color: var(--ink-2); text-decoration: none; padding: 7px 12px; border-radius: 6px; }
.account-views a:hover, .account-views a:focus-visible { background: var(--surface-2); }
.account-views a[aria-current="page"] { color: var(--ink); background: var(--surface); border: 1px solid var(--line); font-weight: 600; }