/* Org space styling. Extracted from index.php's inline <style> per the
   language-separation rule; tournament.php uses it too. */
.orgWrap { max-width: 1180px; margin: 0 auto; padding: 26px 20px 100px; font-family: var(--font-mono); }
.orgLockup { display: flex; align-items: baseline; justify-content: center; gap: 12px; margin: 0 0 6px; flex-wrap: wrap; }
/* The org's own treatment: Lafter's gold gradient, wide tracking, small-caps
   feel. Deliberately NOT an imitation of the company's own wordmark -- this is
   Lafter's visual language applied to their name, which is what nominative use
   allows. Don't swap in their actual lettering or logo. */
.orgLockupName {
    font-size: 2.5rem;
    letter-spacing: -0.015em;
    background: linear-gradient(135deg, var(--gold-light, #e8d9a0) 0%, var(--gold) 42%, #b8912f 68%, var(--gold) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}
.orgLockupRest { font-family: var(--font-deco); font-size: 1.6rem; color: var(--heading); }
.orgTagline { text-align: center; color: var(--text-muted); font-size: 0.86rem; margin: 0 auto 22px; max-width: 520px; line-height: 1.6; }

.orgNotice { background: var(--bg-card); border-left: 3px solid var(--gold-dim); border-radius: 0 8px 8px 0; padding: 13px 18px; font-size: 0.82rem; color: var(--text-muted); line-height: 1.65; margin-bottom: 38px; }

.orgH2 { font-size: 0.7rem; letter-spacing: 1.5px; text-transform: uppercase; color: var(--gold); font-weight: 700; margin: 38px 0 14px; padding-bottom: 7px; border-bottom: 1px solid var(--border); }
.orgGrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
/* Six cards across four columns leaves a ragged two-card orphan row.
   Three columns divides evenly, and the wide card spans beneath. */
@media (min-width: 900px) { .orgGrid { grid-template-columns: repeat(3, 1fr); } }
.orgCard { background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; padding: 18px 20px; }
.orgCard h3 { font-size: 0.78rem; color: var(--heading); margin: 0 0 10px; letter-spacing: .3px; }
.orgCard ul { list-style: none; padding: 0; margin: 0; }
.orgCard li { font-size: 0.79rem; color: var(--text-muted); line-height: 1.6; padding-left: 13px; position: relative; margin-bottom: 6px; }
.orgCard li:before { content: ""; position: absolute; left: 0; top: 8px; width: 4px; height: 4px; border-radius: 50%; background: var(--blood); }
.orgCard li b { color: var(--text); font-weight: 600; }
.orgCard li a { color: var(--gold); text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--gold) 35%, transparent); }
.orgCard li a:hover { border-bottom-color: var(--gold); }
/* Casting has a lead-in and six bullets; at one column it leaves a tall
   ragged gap beside it, so it spans instead of squeezing. */
.orgCardWide { grid-column: 1 / -1; }
.orgCardWide ul { columns: 2; column-gap: 28px; }
.orgCardWide li { break-inside: avoid; }
@media (max-width: 700px) { .orgCardWide ul { columns: 1; } }
.orgCardLead { margin: 0 0 12px; font-size: 0.79rem; color: var(--text-muted); line-height: 1.6; max-width: 70ch; }

/* Roadmap */
.rmBar { height: 5px; background: var(--overlay-soft); border-radius: 99px; overflow: hidden; margin-bottom: 6px; }
.rmBarFill { height: 100%; background: linear-gradient(90deg, var(--gold-dim), var(--gold)); transition: width .3s; }
.rmCount { font-size: 0.72rem; color: var(--text-muted); margin-bottom: 20px; }
.rmSection { margin-bottom: 22px; }
.rmSectionTitle { font-size: 0.74rem; color: var(--text); font-weight: 700; margin-bottom: 8px; letter-spacing: .4px; }
.rmItem { display: flex; align-items: flex-start; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--border); }
.rmItem:last-child { border-bottom: none; }
/* Four states, cycled by clicking: blank, ✕ not started, – in progress,
   ✓ done. Blank is where an item starts, so adding one does not claim
   anything about it. Not started stays quiet -- a rail of loud marks would
   say nothing. The middle state is the one worth seeing. */
.rmBox { flex-shrink: 0; width: 14px; height: 14px; margin-top: 3px; border: 1px solid var(--border); border-radius: 3px; display: flex; align-items: center; justify-content: center; font-size: 10px; line-height: 1; color: var(--text-muted); background: transparent; }
.rmItem.is-active .rmBox { border-color: var(--gold-dim); color: var(--gold); font-size: 13px; }
.rmItem.is-active .rmTitle { color: var(--gold); }
.rmItem.done .rmBox { background: var(--gold); border-color: var(--gold); color: var(--on-gold); }
.rmItem.done .rmTitle { text-decoration: line-through; color: var(--text-muted); }

/* Priority card, cloned from the lane cards on the account preferences page:
   same border, same 1st/2nd/3rd/× steps, same gold-silver-bronze-red, same
   click-to-cycle. Any number of items can hold the same priority, exactly as
   two lanes can both be 2nd. Sized down to sit in a rail row. */
.rmPrio {
    flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    width: 22px; min-height: 20px; margin-top: 1px; padding: 1px 2px;
    margin-left: -4px;
    border: 1.5px solid transparent;
    border-radius: 6px;
    transition: transform 0.15s, border-color 0.2s, opacity 0.2s;
    user-select: none;
}
.rmPrioLabel { font-family: var(--font-mono); font-size: 0.5rem; color: var(--text-muted); }
/* Unset is a hint of a card, not a card: nineteen empty boxes down the rail
   would read as louder than the priorities they surround. */
.rmItem.adminOn .rmPrio { cursor: pointer; border: 1px dashed var(--border); }
.rmItem.adminOn .rmPrio:not([data-priority="0"]) { border-style: solid; border-width: 1.5px; }
.rmItem.adminOn .rmPrio:hover { transform: scale(1.08); }

.rmPrio.priority-1 { border-color: var(--gold); }
.rmPrio.priority-2 { border-color: var(--silver); }
.rmPrio.priority-3 { border-color: var(--bronze); }
.rmPrio.priority-x { border-color: var(--red-x); opacity: 0.4; }
.rmPrio.priority-1 .rmPrioLabel { color: var(--gold); }
.rmPrio.priority-2 .rmPrioLabel { color: var(--silver); }
.rmPrio.priority-3 .rmPrioLabel { color: var(--bronze); }
.rmPrio.priority-x .rmPrioLabel { color: var(--red-x); font-size: 0.62rem; }

.rmBody { flex: 1; min-width: 0; }
/* One line each, side-scrolled rather than wrapped. This rail is narrow and a
   long item used to wrap to three or four lines, which made one entry look
   like several and pushed the rest of the list off the screen. The whole text
   is still reachable: drag it sideways, or rest on it and the title shows it
   in full. The scrollbar is hidden because a 2px one on a 20px row is noise;
   the overflow fade on the right is what says there is more. */
.rmTitle, .rmDetail {
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    scrollbar-width: none;
}
.rmTitle::-webkit-scrollbar, .rmDetail::-webkit-scrollbar { display: none; }
.rmTitle { font-size: 0.82rem; color: var(--text); line-height: 1.5; }
.rmDetail { font-size: 0.72rem; color: var(--text-muted); margin-top: 2px; line-height: 1.5; }
/* Fades the last few pixels of any line that runs past its box, so a clipped
   item is visibly clipped rather than looking like it ends there. */
.rmTitle, .rmDetail {
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 14px), transparent);
    mask-image: linear-gradient(90deg, #000 calc(100% - 14px), transparent);
}
.rmLink { font-size: 0.72rem; color: var(--gold); text-decoration: none; }
.rmLink:hover { text-decoration: underline; }
.rmAdmin { display: flex; gap: 4px; flex-shrink: 0; opacity: .45; }
.rmAdmin:hover { opacity: 1; }
.rmAdmin button { background: none; border: 1px solid var(--border); color: var(--text-muted); border-radius: 4px; cursor: pointer; font-family: inherit; font-size: 0.62rem; padding: 1px 5px; line-height: 1.5; }
.rmAdmin button:hover { border-color: var(--gold-dim); color: var(--gold); }
.rmAdmin button[data-act="delete"] { font-family: var(--font-mono); font-size: 0.8rem; line-height: 1.1; }
.rmAdmin button[data-act="delete"]:hover { border-color: var(--red-x); color: var(--red-x); }
.rmItem.adminOn .rmBox { cursor: pointer; }

.rmAddRow { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.rmAddRow input { flex: 1; min-width: 130px; background: var(--overlay-soft); border: 1px solid var(--border); border-radius: 6px; color: var(--text); padding: 6px 9px; font-family: inherit; font-size: 0.74rem; }
.rmAddRow input:focus { outline: none; border-color: var(--gold-dim); }
.rmAddRow button { background: var(--overlay-soft); border: 1px solid var(--gold-dim); color: var(--gold); border-radius: 6px; padding: 6px 12px; font-family: inherit; font-size: 0.74rem; cursor: pointer; }

.adminTag { display: inline-block; font-size: 0.6rem; letter-spacing: 1px; text-transform: uppercase; color: var(--gold); border: 1px solid var(--gold-dim); border-radius: 99px; padding: 1px 8px; margin-left: 8px; vertical-align: middle; }

/* Forms */
/* Two lines, fixed: the form and where you are with it on the first, what it
   is about on the second. It was one flex line with the description sharing it
   with the status, so in a rail the description wrapped to four lines around
   the word "Submitted" and no two rows were the same height. */
.formRow {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: baseline;
    column-gap: 10px; row-gap: 3px;
    background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px;
    padding: 11px 14px; margin-bottom: 9px; text-decoration: none;
}
.formRow:hover { border-color: var(--gold-dim); }
.formRow .fTitle {
    color: var(--text); font-size: 0.82rem; font-weight: 600;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* One line, and the whole of it is on the element's title. A row that grows
   with the length of somebody's blurb is a list you cannot scan. */
.formRow .fDesc {
    grid-column: 1 / -1;
    color: var(--text-muted); font-size: 0.72rem; line-height: 1.5;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.formRow .fGo { color: var(--gold); font-size: 0.75rem; white-space: nowrap; }
.formRow.doneRow { opacity: .6; }
.formRow.doneRow .fGo { color: var(--text-muted); }
.emptyNote { color: var(--text-muted); font-size: 0.78rem; padding: 10px 0; }

/* Join card */
.joinCard { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 22px; text-align: center; }
.joinCard input[type="email"] { width: 100%; max-width: 340px; background: var(--overlay-soft); border: 1px solid var(--border); border-radius: 8px; color: var(--text); padding: 10px; font-family: inherit; font-size: 0.8rem; box-sizing: border-box; margin-bottom: 10px; }
.joinCard input:focus { outline: none; border-color: var(--gold-dim); }
.orgBtn { padding: 9px 20px; border-radius: 999px; border: 1px solid var(--gold-dim); background: linear-gradient(140deg, var(--gold), var(--gold-light)); color: var(--on-gold); font-weight: 700; cursor: pointer; font-family: inherit; font-size: 0.82rem; }
.orgHint { font-size: 0.7rem; color: var(--text-muted); margin-top: 11px; line-height: 1.55; }
#joinStatus { margin-top: 10px; font-size: 0.76rem; color: var(--text-muted); }

.legalNote { margin-top: 44px; padding-top: 18px; border-top: 1px solid var(--border); font-size: 0.68rem; color: var(--text-muted); line-height: 1.7; }


/* Three columns, and the two outer ones hug the screen rather than the
   reading column: forms on the left, build progress on the right, both of
   them lists you check while looking at something else. The middle is the
   brackets, which is the thing you came to look at.

   The layout breaks out of .orgWrap's 1180px to the full viewport width --
   otherwise the rails sit in from the edge with dead space outside them, and
   the middle is narrower than the thing it has to draw. */
.orgLayout {
    display: grid;
    grid-template-columns: minmax(240px, 330px) minmax(0, 1fr) minmax(240px, 330px);
    gap: 28px;
    align-items: start;
}
/* The page widens for this layout instead of the layout breaking out of the
   page. 100vw counts the vertical scrollbar and .orgWrap's width does not, so
   a full-bleed child was always wider than the space it had -- which is the
   whole of why the page scrolled sideways. */
.orgWrapWide { max-width: none; }
/* The header still reads at a sane measure inside a page with no max-width. */
.orgWrapWide > .orgLockup,
.orgWrapWide > .orgTagline,
.orgWrapWide > .legalNote { max-width: 1180px; margin-left: auto; margin-right: auto; }
.orgMain { min-width: 0; }
/* Each rail is its own scrolling pane, pinned so it stays on screen: a list
   you consult while reading the middle is no use once it has scrolled away.
   It scrolls inside itself rather than growing the page, so a long roadmap
   and a long list of forms cannot drag the brackets down between them. */
.orgRail {
    min-width: 0;
    position: sticky;
    top: 12px;
    max-height: calc(100vh - 24px);
    overflow-y: auto;
    scrollbar-width: thin;
    padding-right: 4px;
}
.orgRail::-webkit-scrollbar { width: 6px; }
.orgRail::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
.orgRail::-webkit-scrollbar-track { background: transparent; }
.bracketSoon p { font-size: 0.78rem; color: var(--text-muted); line-height: 1.7; margin: 0; }
.orgRailH2 {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 1.35rem;
    color: var(--heading);
    margin: 0 0 12px;
}
.railCard li { font-size: 0.75rem; }
.railLink {
    display: inline-block;
    margin-top: 12px;
    font-size: 0.74rem;
    color: var(--gold);
    text-decoration: none;
    border-bottom: 1px solid transparent;
}
.railLink:hover { border-bottom-color: var(--gold-dim); }

.backLink {
    display: inline-block;
    margin-bottom: 18px;
    font-size: 0.76rem;
    color: var(--text-muted);
    text-decoration: none;
}
.backLink:hover { color: var(--gold); }

.joinCardIn { display: flex; align-items: center; }

/* Narrow enough that three columns would be three unreadable ones. Stacked,
   and nothing is pinned: on one column a sticky pane is a pane covering the
   thing under it. Forms first -- they are what someone came to fill in. */
@media (max-width: 1000px) {
    .orgLayout { grid-template-columns: 1fr; gap: 30px; }
    .orgRail {
        position: static;
        max-height: none;
        overflow: visible;
        padding-right: 0;
    }
    .orgRail .orgRailH2 { position: static; }
    .orgRailForms { order: 1; }
    .orgMain { order: 2; }
    .orgRail:last-of-type { order: 3; }
}

.railNote { font-size: 0.7rem; color: var(--text-muted); opacity: 0.85; line-height: 1.55; margin: 10px 0 0; font-style: italic; }
.rmUnsaved { font-size: 0.68rem; color: var(--text-muted); opacity: 0.8; font-style: italic; margin: 4px 0 8px; }
/* The Build progress tag is a label; this one goes somewhere, so it needs to
   look clickable rather than identical to a static badge. */
.adminTagLink { text-decoration: none; transition: background 0.15s, color 0.15s, border-color 0.15s; }
.adminTagLink:hover { background: var(--gold); color: var(--on-gold); border-color: var(--gold); }

/* Confirmation shown in place after a verification link is sent. */
.joinSent { color: var(--verified); font-size: 0.85rem; margin-top: 10px; }

/* Who a form is for, above the forms it applies to. */
.formGroupHead {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
    margin: 20px 0 8px;
    font-family: var(--font-mono);
}
.formGroupHead:first-of-type { margin-top: 4px; }
.formGroupLabel { font-size: 0.74rem; color: var(--gold); letter-spacing: 0.3px; }
.formGroupNote { font-size: 0.68rem; color: var(--text-muted); opacity: 0.8; }

/* Whether this org's forms are accepting changes. Everyone sees the state;
   only an admin sees the button, and the endpoint re-checks that. */
.formsLock {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 12px 16px;
    margin-bottom: 14px;
    font-family: var(--font-mono);
}
.formsLock.on { border-color: var(--gold-dim); background: rgba(201,168,76,0.07); }
.formsLock strong { font-size: 0.8rem; color: var(--text); }
.formsLock.on strong { color: var(--gold); }
.formsLock p { margin: 3px 0 0; font-size: 0.74rem; color: var(--text-muted); line-height: 1.5; max-width: 58ch; }

/* ===== Divisions: the answer that has to land before anything else ===== */

.divisionBand {
    position: relative;
    margin: 0 0 22px;
    padding: 22px 24px 20px;
    border: 1px solid var(--gold-dim);
    border-radius: 14px;
    background:
        radial-gradient(120% 140% at 100% 0%, rgba(201,168,76,0.13), transparent 60%),
        var(--bg-card);
    overflow: hidden;
}
/* A lit edge, so the band reads as the headline rather than as one more card. */
.divisionBand::before {
    content: '';
    position: absolute; inset: 0 auto 0 0; width: 3px;
    background: linear-gradient(180deg, var(--gold), var(--gold-dim));
}
.divisionEyebrow {
    display: inline-block; margin-bottom: 6px;
    font-family: var(--font-mono); font-size: 0.64rem;
    letter-spacing: 1.4px; text-transform: uppercase; color: var(--gold);
}
.divisionLead h2 {
    margin: 0 0 8px; font-family: var(--font-head); font-weight: 700;
    font-size: 1.9rem; line-height: 1.05; color: var(--heading);
}
.divisionLead p {
    margin: 0 0 18px; max-width: 62ch;
    font-family: var(--font-mono); font-size: 0.79rem;
    line-height: 1.65; color: var(--text-muted);
}

/* A ladder, not a list: the point is that they sit above one another. */
.divisionLadder { display: grid; gap: 8px; }
@media (min-width: 760px) { .divisionLadder { grid-template-columns: repeat(3, 1fr); } }
.divisionTier {
    position: relative;
    display: flex; flex-direction: column; gap: 2px;
    padding: 12px 14px 12px 16px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--overlay-soft);
    font-family: var(--font-mono);
    transition: transform 0.15s ease, border-color 0.15s ease;
}
.divisionTier:hover { transform: translateY(-2px); }
.divisionTier::before {
    content: ''; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 3px;
}
.divisionTier.legend { border-color: color-mix(in srgb, var(--gold) 45%, transparent); }
.divisionTier.legend::before { background: var(--gold); }
.divisionTier.rise::before   { background: var(--cs-blue, #0acbe6); }
.divisionTier.open::before   { background: var(--text-muted); }
.tierName  { font-size: 0.95rem; font-weight: 700; color: var(--text); }
.divisionTier.legend .tierName { color: var(--gold); }
.tierRange { font-size: 0.72rem; color: var(--text); opacity: 0.85; }
.tierNote  { font-size: 0.68rem; color: var(--text-muted); line-height: 1.5; }
.divisionFoot {
    margin: 16px 0 0; font-family: var(--font-mono);
    font-size: 0.74rem; line-height: 1.65; color: var(--text-muted); max-width: 74ch;
}
.divisionFoot b { color: var(--text); }
.divisionFoot a { color: var(--gold); text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--gold) 35%, transparent); }

/* ===== Cards get an edge and a lift ===== */
.orgCard {
    position: relative;
    overflow: hidden;
    transition: transform 0.15s ease, border-color 0.15s ease;
}
/* A solid rule, full width. It used to fade out to transparent partway
   across, which read as the line being cut off rather than as a deliberate
   edge -- especially with cards of different widths sitting next to each
   other, where every line stopped in a different place. */
.orgCard::before {
    content: '';
    position: absolute; inset: 0 0 auto 0; height: 2px;
    background: var(--gold-dim);
    opacity: 0.6;
}
.orgCard:hover { transform: translateY(-2px); border-color: var(--gold-dim); }
.orgCard h3 {
    font-family: var(--font-mono);
    text-transform: uppercase;
    letter-spacing: 1.1px;
    font-size: 0.66rem;
    color: var(--gold);
}
.orgCardWide::before { background: var(--gold); opacity: 0.85; }

/* ===== The channel's own questions ===== */
.faqHead {
    margin: 34px 0 12px;
    font-family: var(--font-head); font-weight: 700;
    font-size: 1.6rem; color: var(--heading);
}
.faqList { display: grid; gap: 6px; }
.faqItem {
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--bg-card);
    overflow: hidden;
}
.faqItem summary {
    cursor: pointer;
    padding: 11px 15px;
    font-family: var(--font-mono);
    font-size: 0.79rem;
    color: var(--text);
    list-style: none;
    display: flex; align-items: center; gap: 10px;
}
.faqItem summary::-webkit-details-marker { display: none; }
/* A chevron that turns: right when shut, down when open. The +/- it replaces
   swapped one glyph for another, so there was nothing to watch -- an arrow
   that rotates reads as "this opens" before you've read the question. */
.faqItem summary::before {
    content: '';
    flex: none;
    width: 6px; height: 6px;
    margin: 0 2px 2px 3px;
    border-right: 2px solid var(--gold);
    border-bottom: 2px solid var(--gold);
    transform: rotate(-45deg);
    transition: transform 0.18s ease;
}
.faqItem[open] summary::before { transform: rotate(45deg); }
.faqItem summary:hover::before { border-color: var(--gold-light, #e8d9a0); }
.faqItem summary:hover { color: var(--gold); }
.faqItem[open] { border-color: var(--gold-dim); }
.faqItem p {
    margin: 0; padding: 0 15px 13px 34px;
    font-family: var(--font-mono);
    font-size: 0.76rem; line-height: 1.7; color: var(--text-muted);
    max-width: 78ch;
}
.faqItem p b { color: var(--text); }


/* ===== Verified players =====
   Sits directly under the lockup because it is the first thing anyone wants
   to know about a space that is still filling up. For an admin the same
   element is the button that opens the list, so the number and the detail are
   never two separate controls. */
.playerCount {
    /* flex + fit-content + auto margins, not inline-flex: auto margins only
       centre a block-level box, and inline-flex left it hanging under the
       left edge of a centred lockup. */
    display: flex; width: fit-content; align-items: baseline; gap: 7px;
    margin: 2px auto 12px;
    padding: 5px 12px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--overlay-soft);
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--text-muted);
}
.playerCountNum { font-size: 0.95rem; font-weight: 700; color: var(--gold); }
/* No caret: it opens a window rather than unfolding a panel, and an arrow
   promising an expand is a promise about the wrong thing. */
.playerCountBtn { cursor: pointer; transition: border-color 0.15s ease, color 0.15s ease; }
.playerCountBtn:hover { border-color: var(--gold-dim); color: var(--text); }

.rosterOverlay {
    position: fixed; inset: 0; z-index: 1200;
    display: flex; align-items: center; justify-content: center;
    background: rgba(0,0,0,0.62);
    padding: 24px;
}
.rosterOverlay[hidden] { display: none; }
.rosterPanel {
    width: min(760px, 100%);
    max-height: 82vh;
    display: flex; flex-direction: column;
    background: var(--bg-card);
    border: 1px solid var(--gold-dim);
    border-radius: 12px;
    box-shadow: 0 18px 48px rgba(0,0,0,0.55);
    overflow: hidden;
}
.rosterHead {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 14px 11px;
    border-bottom: 1px solid var(--border);
}
.rosterHead h2 {
    margin: 0; flex-shrink: 0;
    display: flex; align-items: center; gap: 8px;
    font-family: var(--font-head); font-weight: 700; font-size: 1.3rem; color: var(--heading);
}
.rosterBubble {
    display: inline-flex; align-items: center; justify-content: center;
    /* Same geometry as the Results pill on the forms list. */
    width: 34px; height: 17px; padding: 0;
    border-radius: 999px;
    background: var(--overlay-soft);
    border: 1px solid color-mix(in srgb, var(--gold-dim) 55%, transparent);
    color: var(--gold);
    font-family: var(--font-mono); font-size: 0.64rem; line-height: 1;
}
.rosterSearch {
    width: 130px; margin-left: auto; padding: 6px 10px;
    border: 1px solid color-mix(in srgb, var(--text-muted) 45%, transparent);
    border-radius: 8px;
    background: var(--overlay-soft);
    color: var(--text);
    font-family: var(--font-mono); font-size: 0.72rem;
    transition: width 0.25s ease, border-color 0.2s ease;
}
.rosterSearch:focus, .rosterSearch:not(:placeholder-shown) {
    outline: none; width: 320px; max-width: calc(100% - 170px);
    border-color: var(--gold-dim);
}
.rosterSearch::placeholder { color: var(--text-muted); }
/* .rosterClose: .lafterX in style.css. */
/* The scroll lives here, so the header and the footer stay put while the list
   moves under them. */
.rosterScroll { flex: 1; overflow: auto; }
.rosterTable {
    width: 100%; border-collapse: collapse;
    font-family: var(--font-mono); font-size: 0.72rem;
}
.rosterTable th {
    text-align: left; padding: 9px 14px;
    font-size: 0.6rem; letter-spacing: 1.1px; text-transform: uppercase;
    color: var(--gold); font-weight: 500;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}
.rosterTable td { padding: 8px 14px; border-bottom: 1px solid var(--border); color: var(--text-muted); vertical-align: baseline; }
.rosterTable tr:last-child td { border-bottom: none; }
.rosterAlias { color: var(--text); font-weight: 600; }
.rosterEmail { opacity: 0.75; }
.rosterYes { color: var(--admin-success, #4caf50); }
.rosterNo  { opacity: 0.55; }
/* A Riot ID in the roster is a link to that player's lookup, and it did not
   look like one until you were on top of it. The underline solidifies and the
   colour lifts on hover, the same way every other link on an org page moves. */
.rosterRiot {
    color: var(--gold); text-decoration: none;
    border-bottom: 1px solid color-mix(in srgb, var(--gold) 35%, transparent);
    transition: color 0.15s ease, border-color 0.15s ease;
}
.rosterRiot:hover, .rosterRiot:focus-visible {
    color: var(--gold-light, #e8d9a0);
    border-bottom-color: var(--gold-light, #e8d9a0);
    outline: none;
}
/* The whole row lights up, so it is obvious which person the ID belongs to
   when the table is long. */
.rosterTable tbody tr { transition: background 0.15s ease; }
.rosterTable tbody tr:hover { background: var(--overlay-soft); }
.divisionFoot a:hover, .rmLink:hover { color: var(--gold-light, #e8d9a0); }
/* "Completed", between the forms still owed and the ones already sent. */
.formSubHead {
    margin: 14px 0 6px;
    font-family: var(--font-mono);
    font-size: 0.66rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.rosterFoot {
    margin: 0; padding: 10px 14px; flex-shrink: 0;
    font-family: var(--font-mono); font-size: 0.68rem;
    color: var(--text-muted); border-top: 1px solid var(--border);
}
.rosterEmpty {
    margin: 0; padding: 18px 14px;
    font-family: var(--font-mono); font-size: 0.7rem;
    color: var(--text-muted);
}
.rosterEmpty[hidden] { display: none; }
.rosterTable th { position: sticky; top: 0; background: var(--bg-card); z-index: 1; }

/* ===== The org's own tabs =====
   An org space is several pages, and until these existed the only way between
   them was a link in a rail on one page and a back link on the others -- so
   the pages existed and the space did not. Same chrome as the match filters:
   a pill track that scrolls rather than wrapping. */
.orgTabs {
    display: flex; align-items: center; gap: 3px;
    width: max-content; max-width: 100%;
    margin: 14px 0 22px;
    padding: 3px;
    background: var(--overlay-soft, rgba(255,255,255,0.03));
    border: 1px solid var(--border);
    border-radius: 999px;
    overflow-x: auto;
    scrollbar-width: none;
}
.orgTabs::-webkit-scrollbar { display: none; }
/* In the drop under the bar, the drop is the panel -- a pill inside a pill is
   two borders saying the same thing. */
.nav-sub .orgTabs { margin: 0; padding: 0; background: none; border: none; }
.orgTab {
    flex: none;
    padding: 4px 14px;
    border: 1px solid transparent; border-radius: 999px;
    color: var(--text-muted); text-decoration: none;
    font-family: var(--font-mono); font-size: 0.72rem;
    white-space: nowrap;
    transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.orgTab:hover, .orgTab:focus-visible { color: var(--gold); outline: none; }
.orgTab.on {
    color: var(--gold);
    border-color: var(--gold-dim);
    background: rgba(201, 168, 76, 0.12);
}

/* Joining: hung from the top of the page, over the column, with its tab
   under it. Minimised, only the tab shows. In the flow, so it covers
   nothing, and clear of the bottom edge the admin bar uses. */
.joinDock {
    position: relative; z-index: 5;
    width: min(460px, 100%);
    margin: 0 auto 18px;
    display: flex; flex-direction: column; align-items: center;
}
.joinDock.noAnim, .joinDock.noAnim .joinDockTab svg { transition: none; }
.joinDockTab {
    order: 1;
    width: 54px; height: 22px; padding: 0; margin-top: -1px;
    display: flex; align-items: center; justify-content: center;
    background: var(--bg-card);
    border: 1px solid var(--gold-dim); border-top: none;
    border-radius: 0 0 10px 10px;
    color: var(--gold);
    cursor: pointer;
    animation: joinDockPulse 3.2s ease-in-out infinite;
}
.joinDockTab svg { width: 12px; height: 8px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.25s; transform: rotate(180deg); }
.joinDock.isMin .joinDockTab svg { transform: none; }
.joinDock.isMin .joinDockTab { border-top: 1px solid var(--gold-dim); border-radius: 10px; margin-top: 0; }
.joinDockBody {
    width: 100%;
    background: var(--bg-card);
    border: 1px solid var(--gold-dim);
    border-radius: 12px;
    padding: 12px 16px 14px;
    text-align: center;
    animation: joinDockPulse 3.2s ease-in-out infinite;
}
.joinDock.isMin .joinDockBody { display: none; }
@keyframes joinDockPulse {
    0%, 100% { box-shadow: 0 4px 18px rgba(0,0,0,0.45), 0 0 0 0 color-mix(in srgb, var(--gold) 0%, transparent); }
    50%      { box-shadow: 0 4px 18px rgba(0,0,0,0.45), 0 0 14px 1px color-mix(in srgb, var(--gold) 22%, transparent); }
}
@media (prefers-reduced-motion: reduce) { .joinDockTab, .joinDockBody { animation: none; } .joinDock { transition: none; } }
.joinLine { margin: 0 0 9px; color: var(--text); font-size: 0.8rem; display: flex; align-items: center; justify-content: center; gap: 7px; flex-wrap: wrap; }
.joinLine:last-child { margin-bottom: 0; }
.joinLine a { color: var(--gold); }
.joinLine strong { color: var(--gold); font-weight: 600; }
.joinForm { display: flex; gap: 8px; }
.joinForm input[type="email"] {
    flex: 1; min-width: 0;
    background: var(--overlay-soft); border: 1px solid var(--border); border-radius: 8px;
    color: var(--text); padding: 8px 10px; font-family: var(--font-mono); font-size: 0.78rem;
}
.joinForm input:focus { outline: none; border-color: var(--gold-dim); }
.joinForm .orgBtn { padding: 7px 16px; white-space: nowrap; }
.joinDock #joinStatus:empty { display: none; }
.joinDock #joinStatus { margin-top: 8px; }
.joinDock .joinSent { margin-top: 0; }
.joinLine.isBanned { color: var(--text-muted); }
.banX { color: var(--red-x); font-size: 1.1rem; line-height: 1; }