/* Website / Minecraft workspaces and website rank name displays. */
.website-name {
  display: inline-flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: .3em;
  max-width: 100%;
  overflow-wrap: anywhere;
}
.website-member-name { color: inherit; min-width: 0; }
.website-prefix, .website-suffix { color: var(--purple); font-size: .9em; font-weight: 700; }
.community-topic p .website-name, .community-topic p .website-member-name { color: var(--purple); }
.community-topic p .website-prefix, .community-topic p .website-suffix { color: var(--green); }
.community-author strong .website-name { font-size: inherit; }
.community-author .website-name > span { display: inline; }
.account-display-name { margin: 8px 0 18px; font-size: 1.15rem; }
#identity .website-name { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#identity .website-prefix, #identity .website-suffix { color: #efe0ff; }
.staff-areas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 0 0 24px; }
.staff-area { display: block; padding: 19px 22px; text-align: left; min-height: 88px; }
.staff-area strong { display: block; font: 400 15px/1.7 var(--pixel); }
.staff-area > span { display: block; margin-top: 5px; font-size: .8rem; font-weight: 400; }
.staff-area.active { background: #3d602b; border-color: #10170b; box-shadow: inset 3px 3px #73984f, inset -3px -3px #253d18, 0 3px #10170b; }
.staff-area.active > span { color: #edf6df; }
.staff-website-scope { font-size: .95rem; padding-bottom: 9px; }
.staff-rank-display { margin-bottom: 14px; padding: 0; }
.staff-rank-display > summary { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; cursor: pointer; padding: 18px 22px; list-style-position: inside; }
.staff-rank-display > summary::before { content: '+'; font: 700 19px monospace; color: var(--purple); }
.staff-rank-display[open] > summary::before { content: '−'; }
.staff-rank-display > summary > strong { flex: 1; font-size: .95rem; }
.staff-rank-display > summary > span { font-size: .83rem; max-width: 65%; }
.staff-rank-display[open] > summary { border-bottom: 2px solid var(--line); }
.staff-rank-display > form, .staff-rank-display > p { padding: 0 22px 22px; }
.staff-rank-preview { border: 2px solid #8a947c; background: #d7ddcd; padding: 13px 16px; margin-top: 18px; }
.staff-rank-preview p { margin: 6px 0 0; color: var(--text); }
.staff-rank-preview .website-prefix, .staff-rank-preview .website-suffix { color: #593078; }
.staff-rank-displays > .staff-help { max-width: 760px; }
@media(max-width:720px) {
  .staff-areas { gap: 10px; }
  .staff-area { padding: 15px 14px; min-height: 105px; }
  .staff-area strong { font-size: 12px; }
  .staff-area > span { font-size: .74rem; }
  .staff-rank-display > summary { padding: 16px; gap: 10px; }
  .staff-rank-display > summary > span { max-width: 100%; flex-basis: 100%; }
  .staff-rank-display > form, .staff-rank-display > p { padding: 0 16px 18px; }
}