/* The roster pieces of the forum Moderators page and the owner Network staff page: the team by rank, a people picker, a rank-powers matrix.
   One colour per rank everywhere on the page. */
.rk-staff { --rk: var(--red-ink); }
.rk-head { --rk: var(--brass); }
.rk-senior { --rk: var(--steel); }
.rk-moderator { --rk: var(--field); }
.rk-junior { --rk: #b9a3d6; }
.rk-trial { --rk: var(--ink-2); }
.fm-rank { display: inline-block; padding: 0.25rem 0.875rem 0.25rem 0.625rem; font: 700 0.8125rem/1.2 var(--mono); letter-spacing: .06em; text-transform: uppercase;
  color: var(--rk); background: color-mix(in srgb, var(--rk) 16%, var(--sheet)); border-left: 0.25rem solid var(--rk);
  clip-path: polygon(0 0, 100% 0, calc(100% - 0.4rem) 50%, 100% 100%, 0 100%); white-space: nowrap; }
.fm-count { font: 400 0.9375rem/1 var(--mono); color: var(--ink-3); margin-left: 0.5rem; }
.fm-tier { margin-top: 1.75rem; }
.fm-tier h3 { display: flex; align-items: center; margin-bottom: 0.5rem; }
.fm-roster { list-style: none; border-top: 1px solid var(--rule); }
.fm-mod { display: grid; grid-template-columns: 3rem minmax(0, 1fr) auto auto; gap: 0.5rem 1.25rem; align-items: center; padding: 0.875rem 0.25rem;
  border-bottom: 1px solid var(--rule); border-left: 0.1875rem solid var(--rk); padding-left: 0.875rem; }
.fm-mod-face { width: 3rem; height: 3rem; border-radius: 50%; object-fit: cover; background: var(--well); flex-shrink: 0; }
.fm-mod-main { display: flex; flex-direction: column; min-width: 0; }
.fm-mod-name { font: 700 1.125rem/1.2 var(--sans); color: var(--ink); overflow-wrap: anywhere; }
.fm-mod-main .index-meta { margin-top: 0.125rem; font-size: 0.875rem; }
.fm-mod-stats { display: flex; gap: 1.5rem; }
.fm-mod-stats dt { font: 400 0.8125rem/1.3 var(--mono); color: var(--ink-3); }
.fm-mod-stats dd { font: 700 1.0625rem/1.3 var(--sans); color: var(--ink); }
.fm-mod-stats dd small { font: 400 0.9375rem var(--sans); color: var(--ink-2); }
.fm-mod-acts { display: flex; flex-wrap: wrap; gap: 0.5rem 0.75rem; align-items: center; justify-content: flex-end; }
.fm-mod-acts .fm-cap { margin: 0; }
.fm-mod .fm-record { grid-column: 2 / -1; margin: 0; }

.fm-lab { display: block; font: 700 0.8125rem/1.2 var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); margin: 1rem 0 0.375rem; }
.fm-appoint { max-width: 40rem; }
.fm-appoint > input[type="search"] { width: 100%; font-size: 1.0625rem; }
.fm-pick { margin-top: 0.5rem; }
.fm-pick-list { list-style: none; border: 1px solid var(--rule); background: var(--sheet); }
.fm-pick-list li + li { border-top: 1px solid var(--rule); }
.fm-pick-row { display: grid; grid-template-columns: auto 2.5rem minmax(0, 1fr) auto; gap: 0 0.75rem; align-items: center; padding: 0.625rem 0.875rem; cursor: pointer; }
.fm-pick-row:hover { background: var(--sheet-2); }
.fm-pick-row:has(input:checked) { background: var(--sheet-2); box-shadow: inset 0.25rem 0 0 var(--brass); }
.fm-pick-row .fm-mod-face { width: 2.5rem; height: 2.5rem; }
.fm-pick-name { display: flex; flex-direction: column; min-width: 0; }
.fm-pick-name b { font-size: 1.0625rem; }
.fm-pick-name small { font: 400 0.875rem/1.3 var(--sans); color: var(--ink-2); }
.fm-pick-none { padding: 0.5rem 0; }
.fm-fallback { margin-top: 0.75rem; }
.fm-fallback summary { cursor: pointer; font-size: 0.9375rem; color: var(--ink-2); }
.fm-fallback input { margin-top: 0.5rem; width: 100%; }
.fm-appoint-go { margin-top: 0.5rem; align-items: flex-end; }
.fm-appoint-go .fm-lab { width: 100%; margin: 0.5rem 0 0; }
.fm-appoint-go select { flex: 1; min-width: 12rem; }

.fm-table-wrap { border: 1px solid var(--rule); background: var(--sheet); max-width: 100%; }
.fm-table-wrap:focus-visible { outline: 2px solid var(--brass); }
.fm-ranks { width: 100%; min-width: 46rem; }
.fm-ranks th, .fm-ranks td { border-bottom: 1px solid var(--rule); padding: 0.5rem 0.75rem; font-size: 1rem; }
.fm-ranks thead th { font: 400 1rem/1.2 var(--sans); color: var(--ink); vertical-align: bottom; text-align: center; padding: 0.75rem 0.5rem; }
.fm-ranks thead th.fm-ranks-power { text-align: left; }
.fm-ranks .fm-rank { white-space: normal; font-size: 0.75rem; text-align: left; }
.fm-ranks tbody th[scope="row"] { font-size: 1rem; width: 40%; }
.fm-ranks-area th { font: 800 1.125rem/1 var(--display); text-transform: uppercase; letter-spacing: .04em; color: var(--brass); background: var(--sheet-2); text-align: left; padding: 0.625rem 0.75rem; }
.fm-ranks td { text-align: center; color: var(--rk); font-size: 1.125rem; font-weight: 700; }
.fm-ranks td.is-held { background: color-mix(in srgb, var(--rk) 13%, transparent); }
.fm-ranks td input { width: 1.25rem; height: 1.25rem; accent-color: var(--rk); }
.fm-ranks tbody th[scope="row"], .fm-ranks thead th.fm-ranks-power { position: sticky; left: 0; background: var(--sheet); z-index: 1; }
.fm-ranks-area th { position: static; }
.fm-table-wrap + .btn { margin-top: 1rem; }

@media (max-width: 48rem) {
  .fm-mod { grid-template-columns: 2.75rem minmax(0, 1fr); padding-left: 0.625rem; }
  .fm-mod-face { width: 2.75rem; height: 2.75rem; }
  .fm-mod-stats, .fm-mod-acts, .fm-mod .fm-record { grid-column: 1 / -1; }
  .fm-mod-acts { justify-content: flex-start; }
  .fm-pick-row { grid-template-columns: auto 2.5rem minmax(0, 1fr); }
  .fm-pick-row .fm-rank { grid-column: 3; justify-self: start; margin-top: 0.25rem; }
  .fm-ranks tbody th[scope="row"] { min-width: 12rem; width: auto; }
}
.fm-pick-row, .fm-pick-name b { font-family: var(--sans); text-transform: none; letter-spacing: 0; }
.fm-ranks tbody th[scope="row"] { font: 400 1rem/1.4 var(--sans); text-transform: none; letter-spacing: 0; color: var(--ink); }
.fm-ranks-area th[scope="rowgroup"] { font: 800 1.125rem/1 var(--display); }