/* Additions for the website (sign-in, member bar, navigation links). The original look lives in site.css. */
.top-right { display: grid; gap: 10px; justify-items: end; }
.member-bar { display: flex; gap: 8px; align-items: center; }
.member-bar form { margin: 0; }
nav.tabs a { display: inline-block; padding: 8px 16px; border-radius: 999px; font: 500 14px var(--f-body); color: #b4c3d8; text-decoration: none; }
nav.tabs a.active { background: linear-gradient(135deg, #3b5f8f, #2f6a6c); color: #eef3f9; }
nav.tabs button:disabled { opacity: .45; }

.account { display: grid; justify-items: center; margin-top: 32px; }
.account-card { width: min(420px, 100%); background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 24px; display: grid; gap: 16px; box-sizing: border-box; }
.account-card h2 { font-size: 22px; }
.account-card form { display: grid; gap: 14px; }
.account-card .btn-primary { justify-self: start; }
.account-card .err, .validation-message, .validation-errors { color: var(--bad); font-size: 13px; margin: 0; }
.validation-errors { padding-left: 18px; }
.account-card .ok { color: var(--good); font-size: 14px; margin: 0; }

.stage { margin-top: 28px; background: var(--surface); border: 1px dashed var(--line); border-radius: 14px; padding: 20px; display: grid; gap: 8px; }
.stage h2 { font-size: 20px; }
.stage ul { margin: 0; padding-left: 20px; color: var(--muted); }

#blazor-error-ui { display: none; position: fixed; bottom: 0; left: 0; right: 0; padding: 10px 16px; background: var(--surface-2); border-top: 1px solid var(--bad); color: var(--ink); z-index: 1000; }
#blazor-error-ui a { color: var(--velvet); margin-left: 8px; }

/* Blazor moves focus to the page title on navigation (for screen readers); no visible box needed. */
h1:focus { outline: none; }

/* Links that do the job of the original page's buttons (tiles, "← Home") look the same as those buttons did. */
a.tile, a.btn-ghost, a.btn { text-decoration: none; }
a.btn-ghost { font: 500 14px var(--f-body); padding: 8px 6px; border-radius: 8px; }
a.btn { display: inline-block; }

/* Collectables drawer: a muted mauve, in keeping with the other calm collection colours */
:root { --c-collect: #a99bc4; }
.cat-collect { --cat: var(--c-collect); }

/* Edition chips: rare in gold, privy marks in the collection colour */
.chip.rare { border-color: var(--gold); color: var(--gold); }
.chip.privy { border-color: color-mix(in srgb, var(--cat) 70%, var(--line)); color: color-mix(in srgb, var(--cat) 70%, var(--ink)); }
.rare-tick > span:first-child { display: flex; gap: 8px; align-items: center; color: var(--ink); font-size: 14px; }
.rare-tick input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--gold); margin: 0; }