/* Team Info page — the reader-facing view of a team's documents.
Page-scoped only; nothing here is a candidate for a global rule.
Comments here use the C-style block form only. A double slash is not a CSS comment and silently
kills the rule that follows it. */
/* ---------------------------------------------------------------------------
Page header
--------------------------------------------------------------------------- */
/* A second class on .page-head supplies the flex row while .page-head keeps owning the bottom
margin (UI/PageHeading.md). Do NOT add a margin-bottom here.
align-items: flex-start keeps the control on the heading's first line rather than centring it
against a two- or three-line title block. */
/* UNUSED SINCE 2026-08-27 — the header moved to the Manage Team template (.modteam-header /
.modteam-head-main), where .modteam-head-text's `flex: 1` pushes the action cell right and this
row is no longer needed. The class is off the element; the rule is kept commented because
restoring the old header means restoring both.
IT WOULD HAVE BEEN ACTIVELY WRONG TO LEAVE ON: .modteam-header is a flex COLUMN, so
justify-content and align-items here would have distributed the header's rows vertically
instead of placing the button beside the heading.
.team-info-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 1rem;
}
*/
/* The team's description under the heading.
`pre-line` restores the line breaks the author typed into the Teams page textarea WITHOUT any
markup being generated from their text — the alternative, replacing newlines with elements. They are
rows of `.team-info-nav-table` (see the bottom of this file), because the Tactics row needs the
D2 expand indicator and that is keyed on `tr[data-expandable]`.
WHAT SURVIVED AND WHERE: the 0.781rem panel type size is now
`.team-info-nav-table > tbody > tr > td`. The button reset, the block/width, the manual padding
and the bottom border are all things `.data-table` supplies, which is most of the reason the two
mechanisms became one.
STILL TRUE IN THE NEW FORM: no `border-left: 2px solid transparent` — .gp-split-left-row's
.is-active draws with an INSET BOX-SHADOW, so the border would push the text 2px right for
nothing.
.team-info-row {
display: block;
width: 100%;
text-align: left;
background: none;
border: none;
border-bottom: 1px solid var(--line-soft);
padding: 0.438rem 0.875rem 0.438rem 1.625rem;
color: inherit;
/ * `font: inherit` first, because a inherits neither the page's font-family nor its
size — declare nothing and it falls through to the UA default, which is the wrong TYPEFACE
and reads as a rendering fault. Then font-size, because the page font is not the panel-row
size: `font: inherit` alone resolves to body's 1rem and the rows come out about a quarter
larger than every other left panel in the portal.
0.781rem is the established value from the two reference implementations UI/Layout.md names
(.loot-boss-row, .roster-list-date). Nothing on .gp-split-left, -body or -row sets a size,
so a non-table panel must state one. * /
font: inherit;
font-size: 0.781rem;
}
.team-info-row:last-child { border-bottom: none; }
*/
/* ---------------------------------------------------------------------------
Document panels
--------------------------------------------------------------------------- */
/* THIS RULE IS LOAD-BEARING AND MUST NOT BE REMOVED AS REDUNDANT.
The `hidden` attribute works through the user agent stylesheet's `[hidden] { display: none }`,
which is the WEAKEST possible author-facing rule — any author `display` beats it. A .gp-card is
`display: flex`, so without this line every document renders at once, stacked, and the page looks
like it has no tabs at all.
Same cascade trap documented for .nav-notif-badge in UI/Badges.md, and the one
.gp-notice-dismissible had to carry its own [hidden] rule for when it was promoted to a global. */
.team-info-doc[hidden] { display: none; }
.team-info-doc { margin-bottom: 0; }
/* The panels are HEADERLESS — the nav row on the left already names the open document, so a heading
would be the panel repeating its own tab (UI/TabsAndPanels.md).
That heading used to supply the top spacing: base .gp-card has NO padding of its own, and the
inset utilities carry the horizontal distance only. So the first inset child needs the margin
instead, or it sits flush against the card's top border while its sides are inset.
global.css already does exactly this for `.gp-card-table > .gp-card-inset-box:first-child`; this
rule is the same fix for the other two combinations these panels actually use — a padding-inset
first child, and a plain .gp-card rather than a table card. */
.team-info-doc > .gp-card-inset:first-child,
.team-info-doc > .gp-card-inset-box:first-child {
margin-top: 1.125rem;
}
/* ---------------------------------------------------------------------------
Fact cards
--------------------------------------------------------------------------- */
/* The row of cards under a document — Schedule / Attendance Rate / Bench Rate on About, and the
three requirement cards on Raider Requirements.
Grid rather than flex so the cards share the width evenly regardless of how much each one holds:
a Schedule card with four rows must not be three times the width of a Bislist card with one.
auto-fit with a minimum lets them drop to two-up and then one-up on a narrow viewport without a
media query. 0.75rem is the gap .team-details-col already uses between stacked section cards. */
.team-info-fact-row {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
gap: 0.75rem;
margin-top: 1rem;
margin-bottom: 1.125rem;
}
/* The document's prose sits directly above the fact row; without this the last paragraph's own
margin is the only separation and the cards read as part of the text. */
.team-info-doc .gp-richtext { margin-bottom: 0; }
/* A qualifier inside the card header strip — "(realm time)". The header is already uppercase,
0.656rem and --ink-3, so this only needs to step back from it: normal case and lighter weight,
which is what distinguishes an aside from the label itself. */
.team-info-fact-hint {
text-transform: none;
font-weight: 400;
letter-spacing: 0;
}
/* ---------------------------------------------------------------------------
Warcraft Logs
--------------------------------------------------------------------------- */
/* One raid night can hold several report codes. They wrap rather than stretching the column, and the
gap keeps them readable as separate links — without it, adjacent codes run together into what
looks like one long code.
Deliberately NOT .gp-badge-row: that class groups badges, and these are plain links. */
.team-info-log-links {
display: inline-flex;
flex-wrap: wrap;
gap: 0.25rem 0.75rem;
}
/* ---------------------------------------------------------------------------
Fact card values
--------------------------------------------------------------------------- */
/* The single-value cards (the three requirement ones). The rate and schedule cards use
.gp-kv-table instead and take their type from it.
0.813rem matches .gp-kv-table's own font-size, so a row of cards mixing the two reads as one set
rather than as two different components sitting next to each other. */
.team-info-fact-value {
font-size: 0.813rem;
color: var(--ink);
}
/* =====================================================================
The nav table — added 2026-08-17 when the flat rows became rows of one
`.data-table`. The Tactics row needs UI/Tables.md's D2 expand indicator, which is keyed on
`tr[data-expandable]` and works nowhere else, so the row that needs it forced the table and
the rest joined it rather than two row mechanisms being kept in step by hand.
These rules mirror pages/tactics.css's for the Team Documents nav, which met the same problem
first. If a THIRD left-panel table appears, they should become a shared rule rather than a
third copy.
===================================================================== */
.team-info-nav-table {
border-top: 1px solid var(--line-soft);
/* `.data-table` ships `margin-bottom: 1.5rem`, which is spacing for a table standing in a
page. Inside a scrolling split panel that margin is counted in the body's scrollHeight but
not in its layout height, so the panel draws a scrollbar on content that fits. */
margin-bottom: 0;
}
/* The panel's type size, not the data table's 0.813rem. 0.781rem is the established left-panel
value (UI/Layout.md's reference implementations). CHILD COMBINATORS are load-bearing: a
descendant selector would also match the boss sub-rows inside the subrow panel and override
the 0.75rem that makes them read as nested. */
.team-info-nav-table > tbody > tr > td {
font-size: 0.781rem;
}
/* HIGHLIGHTS FOLLOW UI/Layout.md's TWO-COLUMN STANDARD, NOT UI/Tables.md's ROW TREATMENT — this
is a menu that happens to be built from a table. `.data-table tbody tr` (0,1,2) paints
`var(--bg-2)` while `.gp-split-left-row` (0,1,0) declares no background at all, so without
this every nav row would sit on a table band instead of on the panel.
Excluding the two interactive states leaves site.css's own (0,2,0) rules owning them, so hover
and selection are still the SHARED ones rather than copies. */
.data-table.team-info-nav-table tbody tr:not(.is-active):not(:hover) {
background: transparent;
}
/* The subrow holding the boss list. `.detail-panel` is `display: grid` with
`repeat(auto-fit, minmax(12rem, 1fr))`, and that 12rem floor cannot fit a 13rem
`.gp-split-left` once the panel's padding and the spine's inset are added — it overflows and
the column grows a horizontal scrollbar. One track with no floor fixes it without abandoning
the panel type.
Chained to the ancestor deliberately: `.detail-panel.expand-spine-detail` is (0,2,0), so a
(0,2,0) page rule would depend on source order. */
.team-info-nav-table .detail-panel.expand-spine-detail {
padding: 0;
grid-template-columns: 1fr;
gap: 0;
}
/* =============================================================================
THE LEFT COLUMN IS TWO CARDS — the document navigation, and a card of links to
other pages. Added 2026-09-07 (Session 220).
============================================================================= */
/* The wrapper exists because .gp-split-layout is a flex ROW: a second card added
beside .gp-split-left would sit NEXT to the nav, not under it. This becomes the
flex child and stacks them.
width and flex-shrink are NOT set here. .gp-split-left carries its own
`width: 13rem; flex-shrink: 0` and this column takes its width from that child,
so restating either would be a second copy of one measurement — and the copy is
the one that goes stale when the shared value moves.
NOT position: sticky. The nav card is sticky on its own and stays so; making the
wrapper sticky as well would pin the links card to the viewport too, which is
wrong for a short list that belongs under the nav rather than beside the reading
column. */
/* [2026-10-02] UNUSED: the left column moved onto the shared stack (.gp-split-left-stack, global.css),
instructed. The page-local rules below are kept commented out, each on its own — CSS comments do
not nest, so the explanatory comments between them stay as they are. */
/* .team-info-left {
display: flex;
flex-direction: column;
gap: 1.125rem;
align-items: flex-start;
} */
/* The links card. It sits under the nav and is NOT sticky and NOT height-capped —
gp-split.js measures `.gp-split-left` alone, which this deliberately is not. */
/* .team-info-links {
width: 13rem;
} */
/* A row in that card. It is an , so the reset is what a link needs rather than
what a button needs: no underline, inherited colour.
THE METRICS ARE THE NAV'S, NOT AN INVENTION. 1.625rem of left padding lines the
label up with the nav labels in the card above: those sit in a table whose
`.col-expand` cell is `min-width: 1.125em` with no padding, followed by a td with
`padding-left: 0.5rem`. The vertical 0.75rem is `.data-table td`'s own value, so
the two cards' rows are the same height.
Hover and the row treatment come from `.gp-split-left-row` in site.css, which
this row also carries — nothing here restates them. */
/* [2026-10-02] UNUSED — replaced by .gp-link-menu-row (global.css). NOTE ITS VERTICAL PADDING IS THE
STANDARD ROW'S 0.438rem, not this rule's 0.75rem (which matched the nav table's row height), so the
Members and Roster rows are a little shorter than the nav rows above them. Accepted with the
migration. */
/* .team-info-links-row {
display: block;
padding: 0.75rem 0.875rem 0.75rem 1.625rem;
font-size: 0.781rem;
color: inherit;
text-decoration: none;
border-bottom: 1px solid var(--line-soft);
}
.team-info-links-row:last-child {
border-bottom: none;
} */
/* Only the underline is suppressed on hover. The BACKGROUND wash is
`.gp-split-left-row:hover` in site.css, which these rows carry — restating the
gradient here would be a second copy of the shared row treatment, and the copy is
what drifts when the shared one is tuned. */
/* .team-info-links-row:hover {
text-decoration: none;
} */
/* ---------------------------------------------------------------------------
Contacts tab (2026-09-26) — one .gp-section-card per contact
--------------------------------------------------------------------------- */
/* A grid like the fact row, with a wider minimum: a card carries badges and prose, not one value.
Since the same day it is the PANEL ITSELF (a plain wrapper carrying .team-info-doc) and holds
standard gp-card gp-card-padded cards, one per contact, instead of sub-cards inside a card.
.team-info-doc[hidden] (0,2,0) still beats this display: grid (0,1,0), so the tab hides. */
.team-info-contacts {
display: grid;
/*grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));*/
/* TWO FIXED COLUMNS (instructed): every card is half the width whatever the count, so a single
contact no longer stretches across the panel. minmax(0, 1fr) rather than 1fr, so a long
unbroken value (a BattleTag, a Name-Realm) cannot widen its column past the other. */
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.75rem;
margin-bottom: 1.125rem;
}
/* SUPERSEDED the same day: the position moved out of the header into the card's .gp-card-sub.
.team-info-contact-position {
margin-left: 0.5rem;
font-weight: 400;
color: var(--ink-3);
}
*/
/* The name and the position on one line in the card header — moved back beside the name the same
day, on instruction. Baseline-aligned so the smaller position text sits on the name's line; wraps
under it when the card is too narrow for both. */
.team-info-contact-heading {
display: flex;
flex-wrap: wrap;
align-items: baseline;
column-gap: 0.625rem;
}
.team-info-contact-position {
font-size: 0.813rem;
color: var(--ink-3);
}
/* Phone width (the site's 48em breakpoint): one column, or each card is too narrow to read. */
@media (max-width: 48em) {
.team-info-contacts {
grid-template-columns: minmax(0, 1fr);
}
}
.team-info-contact-characters {
margin-top: 0.375rem;
}
/* Plain text from a textarea: line breaks kept by CSS, never by building