/*
 * The public staff list — /staff-list/. Loaded only by that page, after main.css,
 * and additive to it: every colour, radius and width below is one of main.css's
 * custom properties, so the palette has one home.
 *
 * COLOUR RULE. Two families of colour meet on this page and they do not mix.
 *
 * THE SITE'S PALETTE, from main.css, is what this file writes: purple (#6900ff) as a
 * BORDER and a translucent background FILL and never as text — measured against every
 * background here it is 2.79:1 on #1a0033, 2.51:1 on the composited panel and 2.23:1
 * on the gradient's lightest point, so it fails AA at every size as text. Text is
 * --text-primary or --text-muted, both measured below. The site's green accent
 * (#00ff00) is NOT used in this file at all any more; it is the focus ring main.css
 * sets site-wide, and it is also — separately — the founder's colour for Moderator,
 * which arrives through the rank map and never through this stylesheet.
 *
 * THE RANK COLOURS are the founder's Discord role colours and are written ONLY in
 * lib/rank-colours.php. They reach this file as --rank-colour and --rank-halo and no
 * rule here may set a colour on an element carrying .staff-rank. A rank word is the
 * one place on this page where a colour comes from data rather than from the palette.
 *
 * MEASURED, not eyeballed, against each pair's actual COMPOSITED background — the
 * cards are translucent and sit on a gradient with background-attachment: fixed, so
 * the bed under a card depends on where it is in the viewport. Worst case on the
 * whole page is --text-muted on a card over the gradient's lightest point: 6.54:1,
 * against a 4.5:1 requirement. Recompute rather than eyeball if any of these change:
 *
 *   card = rgba(105,0,255,0.28) composited -> #30006c (over #1a0033) .. #3f009a (over #2e0073)
 *   --text-primary #f5f0ff   14.00:1 .. 11.20:1
 *   --text-muted   #c9aeff    8.18:1 ..  6.54:1
 *   --green-accent #00ff00   11.40:1 ..  9.12:1
 *
 * NO ANIMATION AND NO TRANSITION anywhere in this file, so there is nothing for
 * prefers-reduced-motion to switch off. The page is a list; it does not move.
 */

.staff-heading {
    font-size: clamp(1.25rem, 3.2vw, 1.75rem);
    font-weight: 800;
    margin-bottom: 1.25rem;
}

/* -------------------------------------------------------------------------
 * People — "Name — Rank"
 * ---------------------------------------------------------------------- */

.staff-people {
    list-style: none;
    margin: 0;
    padding: 0;
}

.staff-person {
    /*
     * A name can be 60 characters with no spaces in it (the roster's cap), and at
     * 360px that would push the page sideways. main.css sets overflow-x: hidden on
     * body, which would hide the overflow rather than fix it, so the break happens
     * here where the text is.
     */
    overflow-wrap: break-word;
    padding-block: 0.3rem;
}

.staff-person__name {
    font-weight: 700;
    color: var(--text-primary);
}

/* -------------------------------------------------------------------------
 * Rank colours — the halo, and it is the whole reason this works
 * ---------------------------------------------------------------------- */

/*
 * NO COLOUR IS WRITTEN IN THIS BLOCK. --rank-colour and --rank-halo arrive per rank
 * from lib/rank-colours.php, which is the only place the founder's Discord role
 * colours are written; this is the TREATMENT, written once for all eleven. Changing a
 * rank's colour is one line of that map and nothing here.
 *
 * WHY A HALO AT ALL. Seven of the eleven fail AA as text on the team card at the
 * gradient's light end (#3f009a), four fail on the flat panel, and three of those four
 * fail on Discord's own near-black too — #6b189a measures 1.82:1 there. They are not
 * readable as small text on any background, so no amount of lightening fixes them
 * without turning them into different colours. And because the cards are translucent
 * over a fixed gradient, a bare colour's ratio would depend on how far the reader had
 * scrolled. The halo makes the colour immediately touching every glyph the halo's own,
 * so the exact hex survives anywhere on the page and the ratio no longer moves with
 * the background.
 *
 * THE HALO IS UNIFORMLY DARK, by the founder's decision of 2026-08-17 after seeing a
 * per-rank version live: "having some of them as white glows makes it look weird."
 * Seven of the eleven clear 5.7:1 against it. Four do not — King 3.04, both Managers
 * 2.35, King's Hand 2.22 — because they are dark colours on a dark surround, and that
 * is the accepted cost of his call rather than something to quietly fix here. The
 * numbers and the three routes back are in lib/rank-colours.php.
 *
 * BLUR IS ZERO, AND THAT IS THE LOAD-BEARING PART — MEASURED, NOT ASSUMED. A blurred
 * glow spreads the same ink across its radius, so the colour flush against the glyph
 * is only a fraction of the halo and the measured ratio is not the realised one. Work
 * it out for a 2px blur, whose first ring carries roughly a fifth of full coverage, and
 * SIX of the eleven ranks fall below 4.5:1 — #6b189a lands at 1.19 where the hard ring
 * gives it 9.45. Eight hard 1px copies instead produce a solid one-pixel ring of the
 * halo at full opacity, and the gap between the ideal ratio and the realised one at
 * that edge is +0.00 for every rank. It reads as a tight outline rather than as a soft
 * glow, and that is the deliberate trade: the soft version is the one that looks nice
 * and achieves nothing. Do not soften this without redoing that arithmetic.
 *
 * Eight offsets rather than four: with only the axial four, a diagonal glyph edge
 * touches the background directly at the corners, which is exactly where a thin stroke
 * is hardest to see. -webkit-text-stroke is NOT used — without paint-order support it
 * strokes over the glyph and thins the letterforms.
 */
.staff-rank {
    color: var(--rank-colour, var(--text-muted));
    text-shadow:
        1px 0 0 var(--rank-halo, transparent),
        -1px 0 0 var(--rank-halo, transparent),
        0 1px 0 var(--rank-halo, transparent),
        0 -1px 0 var(--rank-halo, transparent),
        1px 1px 0 var(--rank-halo, transparent),
        1px -1px 0 var(--rank-halo, transparent),
        -1px 1px 0 var(--rank-halo, transparent),
        -1px -1px 0 var(--rank-halo, transparent);
}

/*
 * The fallback in both var() calls above is what a rank with no style attribute gets —
 * the muted body colour and no halo, which is the page's ordinary text. So a rank the
 * PHP did not colour looks unremarkable rather than broken, and JavaScript is not
 * involved in any of this.
 *
 * NOTHING BELOW MAY SET A COLOUR ON A RANK WORD. .staff-rank is a single class, so any
 * later single-class rule setting `color` on the same element wins on source order and
 * silently throws the rank colour away. That is what the previous version of this file
 * did with a muted colour here, and the symptom was every rank rendering grey with a
 * halo around it. Weight and size are safe to set; colour is not.
 */
.staff-person__rank {
    font-weight: 600;
}

/*
 * The separator is a real character in the HTML, not a ::before — with this
 * stylesheet missing the line still reads "Dralga — King". All this does is stop it
 * being the thing that wraps.
 */
.staff-person__sep {
    color: var(--text-muted);
    white-space: nowrap;
}

/*
 * Leadership reads as a short column at any width. It is deliberately NOT a grid:
 * there is one person per royal rank, the order is the hierarchy, and a grid would
 * reflow that order into rows that read across instead of down.
 */
.staff-people--leadership .staff-person,
.staff-people--managers .staff-person {
    font-size: 1.0625rem;
}

.staff-people--managers {
    margin-bottom: 1.75rem;
}

/* -------------------------------------------------------------------------
 * Teams
 * ---------------------------------------------------------------------- */

.staff-teams {
    display: grid;
    /*
     * auto-fit rather than a breakpoint count: the columns follow the space, and at
     * 360px minmax collapses to one column with no media query to keep in step. The
     * 100% in min() is what stops a 17rem minimum overflowing a narrower viewport.
     */
    grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
    gap: 1rem;
    align-items: start;
}

.staff-team {
    background: rgba(var(--purple-rgb), 0.28);
    border: 1px solid rgba(var(--purple-rgb), 0.5);
    border-radius: var(--radius);
    padding: 1rem 1.15rem 1.15rem;
}

/*
 * "Team Alpha — Admin — Name" is left in NORMAL INLINE FLOW rather than made a flex
 * row. Inline flow already wraps it at the spaces around the dashes and already puts
 * the small rank label on the shared baseline, and a flex container would instead
 * turn every span into an item — collapsing the spaces that are inside the separator
 * spans and needing a gap to put them back, which is two ways of spacing one heading
 * that have to agree. The separator's own white-space: nowrap is what keeps a dash
 * from starting a line on its own.
 */
.staff-team__title {
    font-size: 1.0625rem;
    font-weight: 800;
    margin-bottom: 0.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid rgba(var(--purple-rgb), 0.5);
}

.staff-team__name,
.staff-team__lead {
    color: var(--text-primary);
    overflow-wrap: break-word;
}

/*
 * The rank word in a team's heading — small, uppercase, and coloured by .staff-rank
 * from the map like every other rank word. NO COLOUR HERE: see the note above.
 *
 * text-transform only changes the glyphs, so the halo follows the uppercased shapes.
 */
.staff-team__rank {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/*
 * "Vacant" is a STATE, not a person, and is the only thing in a team heading that is
 * deliberately not given a rank colour: colouring it would make an empty chair look
 * like somebody. Muted, and italic so it reads as a note rather than as a name.
 * #c9aeff on the team card measures 8.18:1 at its darkest and 6.54:1 at its lightest.
 */
.staff-team__vacant {
    color: var(--text-muted);
    font-style: italic;
    font-weight: 600;
}

.staff-team .staff-person {
    font-size: 0.9375rem;
}

/* -------------------------------------------------------------------------
 * Notes — an empty roster, or one that could not be read
 * ---------------------------------------------------------------------- */

.staff-note {
    max-width: 44rem;
    margin: 0;
    color: var(--text-muted);
}