/* ---- Points ------------------------------------------------------------ */
.agentPts { flex: 1 0 6ch; max-width: 9ch; color: var(--gold); font-variant-numeric: tabular-nums; text-align: right; }
.rivalPts { width: 8ch; flex: none; color: var(--gold); font-variant-numeric: tabular-nums; text-align: right; }
.poolHead > button.agentPts, .poolHead > button.rivalPts { text-align: right; }
/* The team's total under its name. */
.teamPtsLine {
    display: flex; align-items: baseline; justify-content: space-between;
    margin: -0.1rem 0 0.5rem;
    font-family: var(--font-mono); font-size: 0.7rem; color: var(--text-muted);
}
.teamPtsLine strong { color: var(--gold); font-size: 0.95rem; font-weight: 600; font-variant-numeric: tabular-nums; }
/* Free agent: the word is the switch. On is gold; off is struck through and
   stays readable. */
.faToggle {
    background: none; border: 1px solid var(--gold-dim); border-radius: 999px;
    padding: 0.22rem 0.7rem;
    font-family: var(--font-mono); font-size: 0.7rem; color: var(--gold);
    cursor: pointer; transition: color 0.15s, border-color 0.15s;
}
.faToggle:hover { border-color: var(--gold); }
.faToggle.isOff { color: var(--text-muted); border-color: var(--border); text-decoration: line-through; text-decoration-thickness: 1px; }
/* A state word rather than a struck one: Closed is grey, not crossed out. */
.faToggle.isState.isOff { text-decoration: none; }
.faToggle.isOff:hover { color: var(--text); }

.rivalEnd { width: 11ch; flex: none; display: flex; justify-content: flex-end; }
.rivalEnd .reqSend { margin-left: 0; }
.rivalCount, .poolHead[data-sort-list="poolTeams"] > .poolHeadEnd { width: 6ch; text-align: right; }

/* The banner's three lines, and the points beside the lower two. */
.mainAcctIcon { grid-column: 1; grid-row: 1 / span 3; }
.mainAcctId, .mainAcctLv, .mainAcctRank { grid-column: 2; min-width: 0; font-family: var(--font-mono); }
.mainAcctId { grid-row: 1; color: var(--text); font-size: 0.86rem; overflow-wrap: normal; }
/* In an overlay only the name is the lookup link. */
a.mainAcctId { text-decoration: none; }
a.mainAcctId:hover { color: var(--gold); }
.mainAcctWhere { color: var(--gold); font-size: 0.68rem; margin-left: 0.3rem; }
.mainAcctLv { grid-row: 2; }
.mainAcctRank { grid-row: 3; }
.mainAcctLv, .mainAcctRank { color: var(--text-muted); font-size: 0.7rem; line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* The label and its chevron sit on the right wall with the number under
   them, so a longer number grows leftwards and moves nothing else. */
.mainAcctPtsHead {
    grid-column: 3; grid-row: 1; align-self: end; justify-self: end;
    display: inline-flex; align-items: center; gap: 4px;
    font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.06em; color: var(--gold-dim);
}
.mainAcctPtsHead svg { width: 9px; height: 6px; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.mainAcctPts {
    grid-column: 3; grid-row: 2 / span 2; align-self: center; justify-self: end; text-align: right;
    font-family: var(--font-mono); font-size: 1.7rem; font-weight: 700; line-height: 1;
    color: var(--gold); font-variant-numeric: tabular-nums;
}
.mainAcct.isAlt .mainAcctId { font-size: 0.76rem; }
.mainAcct.isAlt .mainAcctLv, .mainAcct.isAlt .mainAcctRank { font-size: 0.64rem; }
.mainAcct.isAlt .mainAcctWhere { color: var(--gold-dim); }

/* Save says Saved in place, and does not change width doing it. */
.draftSave#draft-save { min-width: 7ch; text-align: center; transition: background 0.2s, color 0.2s, border-color 0.2s; }
.draftSave.isSaved { background: var(--ok); border-color: var(--ok); color: #fff; animation: savedPop 0.35s ease-out; }
@keyframes savedPop { 0% { transform: scale(1); } 40% { transform: scale(1.06); } 100% { transform: scale(1); } }

.castCard { cursor: default; }
/* Free agent on a player row: gold FA, struck through when they are not looking. */
.agentFa { flex: 1 0 10ch; max-width: 14ch; }
/* Lanes as the cards mark them: gold, silver, bronze, and struck red for a
   lane they will not play. */
.laneSep { color: var(--text-muted); }
.laneMark1 { color: var(--gold); }
.laneMark2 { color: var(--silver); }
.laneMark3 { color: var(--bronze); }
.laneMarkx { color: var(--red-x); text-decoration: line-through; text-decoration-thickness: 1px; }
/* The whole run, lifted out of a cell it did not fit in. */
.laneBubble.nameBubble { color: var(--gold); font-size: 0.76rem; z-index: 200001; }
.laneBubble.nameBubble.isScript { font-family: var(--font-head); font-size: 1.1rem; }
.laneBubble.nameBubble a { color: inherit; text-decoration: none; }
.laneBubble {
    position: fixed; z-index: 60;
    padding: 5px 10px;
    background: var(--bg-card); border: 1px solid var(--gold-dim); border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,calc(0.45 * var(--shk, 1)));
    font-family: var(--font-mono); font-size: 0.72rem; color: var(--gold-dim); white-space: nowrap;
    pointer-events: none;
}
.draftGatePick:last-child:nth-child(odd) { grid-column: 1 / -1; }
/* Free agent, in gold; Not looking and Signed, quiet. */
.faTag { font-size: 0.66rem; letter-spacing: 0.02em; color: var(--gold); white-space: nowrap; }
.faTag.isOff, .faTag.isSigned { color: var(--text-muted); }
/* A team open to requests to join, or closed. */
.rivalOpen { width: 7ch; flex: none; color: var(--text-muted); }
.rivalOpen.isOpen { color: var(--gold); }
.rivalOpen.isLocked { color: var(--verified); }

/* "Extra", with the same chevron as the mirth label. */
/* .drawerBody .draftLabel is display: block, which undid the gap. */
.draftLabelMore, .drawerBody .draftLabelMore { display: inline-flex; align-items: center; gap: 0.5rem; }
.draftLabelMore svg { width: 9px; height: 6px; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }

/* The left drawer's tab sits on the left edge; the page keeps clear of it. */
body:has(.draftDrawerLeft) { padding-left: 44px; }
.drawerTab.hasNews { animation: lafterTabPulse 2.8s ease-in-out infinite; }
@keyframes lafterTabPulse {
    0%, 100% { box-shadow: 0 2px 14px var(--tabShadow), 0 0 0 0 color-mix(in srgb, var(--notify) 0%, transparent); }
    50%      { box-shadow: 0 2px 14px var(--tabShadow), 0 0 0 6px color-mix(in srgb, var(--notify) 22%, transparent); }
}
.drawerTabDot.isNew { min-width: 10px; width: 10px; height: 10px; top: -4px; left: auto; right: -4px; }
.draftDrawerLeft .drawerTabDot.isNew { right: -4px; }
@media (prefers-reduced-motion: reduce) { .drawerTab.hasNews { animation: none; } }

/* A phone: the drawer is the whole screen, its tab moves inside so it can be
   closed, and nothing else floats over it -- but a tour's bubble, which is
   the tour. */
@media (max-width: 640px) {
    .draftDrawer { width: 100vw; }
    .draftDrawerLeft.isOpen .drawerTab { left: auto; right: 0; border-left: 1px solid var(--gold-dim); border-right: none; border-radius: 8px 0 0 8px; }
    .draftDrawerLeft.isOpen .drawerTabs { left: auto; right: 0; }
    .draftDrawerLeft.isOpen .drawerTabs .drawerTab { right: auto; }
    body:has(.draftDrawer.isOpen) .lafterInbox,
    body:has(.draftDrawer.isOpen) .lafterHelp:not(.isGuiding) { visibility: hidden; }
    body:has(.draftDrawerLeft) { padding-left: 30px; }
    .drawerTab { width: 30px; height: 42px; }
    body:has(.draftDrawerLeft.isOpen) #bugReportTriggerWrap { transform: none; visibility: hidden; }
}

/* A phone: no column titles, and each row a small card -- who and where with
   their mirth, then rank and lanes, then status, role and the end control. */
@media (max-width: 640px) {
    .poolHead { display: none; }
    .agentCard { padding: 0.6rem 0.6rem; border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent); border-radius: 0; }
    .agentLine {
        display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
        grid-template-areas: "riot riot pts" "where rank role" "pos pos pos" "fa fa end";
        gap: 4px 12px; font-size: 0.74rem; align-items: center;
    }
    .agentRiot  { grid-area: riot; width: auto; }
    .agentWhere { grid-area: where; width: auto; }
    .agentPts   { grid-area: pts; width: auto; }
    .agentLvl, .agentAlias, .rivalCapAlias { display: none !important; }
    .agentRank, .agentLvl, .agentRole, .poolHead button.agentRole { margin-left: 0; }
    .agentCard .agentRiot { display: block !important; }
    .agentRank  { grid-area: rank; width: auto; display: block !important; }
    .agentPos   { grid-area: pos; min-width: 0; flex: none; }
    .agentPos:empty { display: none; }
    .agentFa    { grid-area: fa; width: auto; }
    .agentRole  { grid-area: role; width: auto; text-align: right; }
    .agentEnd   { grid-area: end; width: auto; }
    .rivalCard {
        display: grid; grid-template-columns: minmax(0, 1fr) auto auto;
        grid-template-areas: "name where pts" "cap open count" "end end end";
        gap: 4px 12px; font-size: 0.74rem; align-items: center;
        border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent); border-radius: 0;
    }
    .rivalName  { grid-area: name; width: auto; }
    .rivalWhere { grid-area: where; width: auto; }
    .rivalPts   { grid-area: pts; width: auto; }
    .rivalCap   { grid-area: cap; display: block !important; }
    .rivalOpen  { grid-area: open; width: auto; }
    .rivalCount { grid-area: count; width: auto; margin-left: 0; }
    .rivalEnd   { grid-area: end; width: auto; }
    .rivalEnd:empty { display: none; }
    .sideSlider { flex-wrap: wrap; justify-content: center; }
}

/* ---- Players and Teams on one grid ---------------------------------------
   The two lists are read together, so their columns are the same columns:
   face or icon, name, region, mirth, then rank (or level) where the team's
   captain starts, lanes, status, role or seats, and the end control. One
   template for both, heads included; the captain takes the rank and lanes
   columns between them. The phone keeps its own cards (above). */
@media (min-width: 641px) {
    .poolList {
        --poolCols: 26px minmax(16ch, 3fr) 8ch 7ch minmax(12ch, 2fr) minmax(0, 3fr) 11ch 9ch 12ch;
    }
    .poolList .agentLine, .poolList .poolHead, .poolList .rivalCard {
        display: grid; grid-template-columns: var(--poolCols); column-gap: 1.1rem; align-items: center;
    }
    .poolList .agentLine > *, .poolList .poolHead > *, .poolList .rivalCard > * {
        width: auto; max-width: none; min-width: 0; margin: 0; flex: none;
    }
    .poolList .agentIcon, .poolList .rivalIcon { width: 26px; height: 26px; }
    .poolList .rivalIcon .teamIcon { width: 24px; height: 24px; }
    .poolList .rivalCap, .poolList .rivalCapAlias, .poolList .poolHead > .rivalCap { grid-column: span 2; }
    .poolList .rivalOpen { grid-column: 7; }
    .poolList .rivalCount, .poolList .poolHead > .poolHeadEnd { grid-column: 8; text-align: left; }
    .poolList .rivalEnd { grid-column: 9; }
    .poolList .agentEnd { justify-content: flex-end; }
    /* Casters and Spectators: fewer cells, the same columns. Rank where rank
       is, Role where role is, instead of the five sliding into the first five. */
    #poolCasters .agentRank, #poolCasters .agentLvl { grid-column: 5; }
    #poolCasters .agentRole { grid-column: 8; }
}
/* The region, the same gold in both lists: the dim one could not be read. */
.rivalWhere { color: var(--gold); }
@media (min-width: 641px) { .poolList .poolHead > button.agentRole { margin: 0; } }