, and .data-table already gives
every body row a border-top — so the same rule lands a second line directly under the first and
the title reads as sitting in a box.
Everything that is genuinely common stays declared ONCE, in the grouped selector below. Only the
two properties that differ get their own block, so this is a split rather than a copy. */
.modteam-role-group-heading,
.modteam-table-group-heading {
display: flex;
align-items: center;
gap: 0.375rem;
font-size: 0.656rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.038rem;
color: var(--ink-3);
padding: 0.25rem 0;
}
/* The card grid's heading. grid-column spans the whole row of the cards grid; the border and the
margin separate it from the cards beneath. */
.modteam-role-group-heading {
grid-column: 1 / -1;
border-bottom: 1px solid var(--line-soft);
margin-bottom: 0.125rem;
}
/* The table's heading. NO border-bottom — the row below brings its own border-top — and no
grid-column, which is meaningless inside a table cell. */
.modteam-table-group-heading {
border-bottom: 0;
margin-bottom: 0;
}
/* SUPERSEDED 2026-08-06 — .gp-badge now sets text-transform, letter-spacing and font-weight on
ITSELF, so there is nothing left for this container reset to fix. Deleting the copy rather than
keeping the two in step: the badge is the thing that has to survive being placed in a styled
heading, so the fix belongs on the badge, not on every host that might contain one.
The heading is already a flex row with a gap, so no margin is needed to separate the badges.
Original reason, kept because it is why the badge sets those three properties at all: the heading
is uppercase, letter-spaced and 600 weight; the old .role-rank-badge set none of those, so without
a reset the badges inherited all three and looked nothing like the same badge on GuildSetup and
GuildRoles. Inherited uppercase would also have dragged them under the Badges.md rule that an
uppercase badge needs line-height: 1.
.modteam-role-group-heading .role-linked-ranks {
text-transform: none;
letter-spacing: normal;
font-weight: 400;
}
*/
/* Per-group member count shown next to a sort group heading, e.g. "Tank (3)". Lighter than the
heading label so it reads as a secondary value. */
.modteam-group-count {
font-weight: 400;
opacity: 0.75;
}
/* ---- Member list: the two layouts (Session 208) ------------------------------------------------
The Manage Team and Team Members pages render every member TWICE — as a card and as a table row
— and one layout is shown. Which one is a per-viewer choice in localStorage, so only JavaScript
can know it.
THE SWITCH IS AN ATTRIBUTE ON , NOT A CLASS ON A CONTAINER, and that is the whole
anti-flash mechanism. member-layout-boot.js sets it from the , before any page markup is
parsed, so the correct layout is hidden from the very first paint. A class on a container could
only be applied once that container exists, which is exactly too late.
Cards are the default and the unqualified state — the absence of the attribute is a complete
answer, so there is no third state to reason about. */
.modteam-layout-table {
display: none;
}
html[data-member-layout="table"] .modteam-layout-cards {
display: none;
}
html[data-member-layout="table"] .modteam-layout-table {
display: block;
}
/* The layout switch sits hard right in the grouping bar. The MARGIN IS ON THE WRAPPER, never on the
pill, so the pill keeps exactly the appearance it has everywhere else on the site.
The wrapper is also why UI/TogglePill.md's flex-parent caveat does not bite here: .modteam-sort-bar
is display:flex, and a .toggle-pill placed directly in it would blockify and span the bar. Inside
this span the pill is in ordinary block flow and its inline-flex shrink-wraps as designed. */
.modteam-layout-switch {
margin-left: auto;
display: inline-block;
}
/* ---- Member table: column toggles -------------------------------------------------------------
The checkbox-backed .btn form from UI/Buttons.md — the label carries .btn and the real checkbox
stays the state. Only the LAYOUT is declared here; nothing restates what .btn-active looks like. */
.modteam-col-toggles {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.375rem;
padding-top: 0.75rem;
padding-bottom: 0.75rem;
}
.modteam-col-toggle input[type="checkbox"] {
display: none;
}
/* .role-detail-label is a block with a top margin, which is right in a subrow card and wrong in a
flex row. Layout only — the type treatment is the shared class's and is not restated. */
.modteam-col-toggle-label {
margin-top: 0;
margin-right: 0.25rem;
}
/* ---- Member table: the group heading row ------------------------------------------------------
THE HEADING CLASS IS ON A DIV INSIDE THE CELL, NEVER ON THE | . It carries display:flex, and a
flex td stops being a table-cell and collapses its own colspan — the same trap UI/Tables.md
records for .detail-panel.
That div is .modteam-table-group-heading, NOT the card grid's .modteam-role-group-heading. The two
share their type treatment through a grouped selector further up and differ in exactly one thing
that matters: the card's heading draws a bottom border to separate itself from the cards below,
and in a table the next element is a |