/* The account's panels beyond the plain form (application.css has the card, fields and the characters
   table): the waitlist, the choice of a new character's vocation in its colours (knight red, ranger
   green, mage blue, as on the home page), and the game's own lists (who is online, highscores). */

.waitlist-note { color: var(--parch-2); margin: 0 0 14px; }
.waitlist .account-meta { margin-bottom: 14px; }

.vocation-choice { display: grid; gap: 8px; border: 0; padding: 0; margin: 0 0 22px; min-width: 0; }
.vocation-choice legend { font-weight: 800; padding: 0; margin-bottom: 6px; }
.vocation-choice .hint { color: var(--dim); font-size: 14px; margin-bottom: 4px; }
.vocation-option.knight { --voc: var(--hp); --voc-hi: #f6a091; }
.vocation-option.ranger { --voc: var(--ok); --voc-hi: #b4eb9f; }
.vocation-option.mage { --voc: var(--mp); --voc-hi: #a7c6f6; }
.vocation-option {
  display: grid;
  grid-template-columns: auto auto 1fr;
  align-items: center;
  gap: 12px;
  min-height: 64px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--ink);
  cursor: pointer;
  transition: border-color .2s var(--ease-out), background-color .2s var(--ease-out);
}
.vocation-option:hover { border-color: color-mix(in srgb, var(--voc) 55%, transparent); }
.vocation-option:has(:checked) {
  border-color: var(--voc-hi);
  background: color-mix(in srgb, var(--voc) 14%, var(--ink));
}
.vocation-option:has(:focus-visible) { outline: 2px solid var(--gold); outline-offset: 1px; }
.vocation-option input { width: 18px; height: 18px; margin: 0; accent-color: var(--voc); }
.vocation-option-mark { width: 28px; height: 28px; color: var(--voc-hi); }
.vocation-option-text { display: grid; gap: 2px; }
.vocation-option-name { font: 700 22px/1.1 var(--display); color: var(--parch); }
.vocation-option-role { color: var(--dim); font-size: 14px; }

.characters .intended { color: var(--dim); font-size: 13px; }
.characters .in-world { display: block; margin-top: 4px; font: 700 12px var(--body); letter-spacing: .04em; color: var(--ok); }
.characters .rank { width: 2.5em; color: var(--dim); }

.online-count { color: var(--parch-2); margin: 0 0 8px; }
.vocation-filter { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.vocation-filter a {
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--parch-2);
  text-decoration: none;
  font-weight: 700;
  font-size: 15px;
}
.vocation-filter a:hover { border-color: var(--line-gold); color: var(--parch); }
.vocation-filter a[aria-current="page"] { border-color: var(--gold); color: var(--gold); }