/* draft.css — the draft page.
 *
 * Its own sheet rather than more of org.css: the org page is a roadmap and a
 * form list, this is an inbox and two columns of cards, and they share
 * nothing but the palette. Loaded after org.css, so the tokens are already
 * defined.
 *
 * Faces come from the tokens in lafter/style.css. Mono for anything read as
 * data -- names, positions, counts -- which here is nearly all of it.
 */

/* ---- The inbox ---------------------------------------------------------
   Docked as the right rail rather than a button in the corner that opened a
   panel over the page. A panel is a notification, and these are not
   notifications: an offer is a thing you act on, and it belongs beside the
   roster it would change. The unread dot went with the button -- a list you
   can see does not need a mark saying there is something in it. */
.draftInboxHead {
    padding: 0.6rem 0 0.4rem;
    color: var(--gold-dim);
    font-family: var(--font-mono); font-size: 0.8rem;
}
.draftNote {
    padding: 0.7rem 0 0; margin: 0;
    border-top: 1px solid var(--border);
    color: var(--text-muted);
    font-family: var(--font-mono); font-size: 0.72rem; line-height: 1.6;
}

/* ---- Offers ------------------------------------------------------------ */
.offerCard {
    padding: 0.7rem 0.8rem;
    border: 1px solid var(--border);
    border-radius: 3px;
    margin-bottom: 0.4rem;
    background: var(--bg);
}
.offerCard.wide { margin-bottom: 0.6rem; padding: 1rem; }
.offerTeam { font-family: var(--font-mono); font-size: 0.9rem; color: var(--text); }
.offerTag  { color: var(--gold-dim); }
.offerFrom { font-family: var(--font-mono); font-size: 0.72rem; color: var(--text-muted); margin-top: 2px; }
.offerMsg  { font-family: var(--font-mono); font-size: 0.76rem; color: var(--text-muted); line-height: 1.6; margin: 0.5rem 0 0; }
.offerActions { display: flex; gap: 0.4rem; margin-top: 0.7rem; }
.offerYes, .offerNo, .sentPull, .offerSend, .draftSave, .draftSwitchBtn {
    padding: 0.35rem 0.8rem;
    background: none;
    border: 1px solid var(--border);
    border-radius: 3px;
    color: var(--text-muted);
    font-family: var(--font-mono); font-size: 0.74rem;
    cursor: pointer;
    transition: border-color 0.2s, color 0.2s;
}
.offerSend:hover, .draftSave:hover, .draftSwitchBtn:hover { border-color: var(--gold); color: var(--gold); }
.sentPull:hover { border-color: var(--red-x); color: var(--red-x); }
/* The two answers in their own colours, as they are in the inbox: grey on
   grey they were the same button twice. */
/* Tinted, not solid, like the overlay's answers. */
.offerNo  { border-color: color-mix(in srgb, var(--red-x) 60%, transparent); color: var(--red-x); background: color-mix(in srgb, var(--red-x) 10%, transparent); }
.offerNo:hover:not([disabled]) { background: color-mix(in srgb, var(--red-x) 20%, transparent); border-color: var(--red-x); }
.offerYes { border-color: color-mix(in srgb, var(--ok) 60%, transparent); color: var(--ok); background: color-mix(in srgb, var(--ok) 10%, transparent); }
.offerYes:hover:not([disabled]) { background: color-mix(in srgb, var(--ok) 20%, transparent); border-color: var(--ok); }
.offerYes[disabled], .offerNo[disabled], .offerSend[disabled], .sentPull[disabled] { opacity: 0.45; cursor: default; }

.draftErr {
    margin: 0.5rem 0 0;
    color: var(--red-x);
    font-family: var(--font-mono); font-size: 0.72rem; line-height: 1.5;
}
.draftErr.isFresh { animation: draftErrFlash 1.6s ease-out; }
@keyframes draftErrFlash { 0%, 40% { background: color-mix(in srgb, var(--red-x) 18%, transparent); } 100% { background: transparent; } }
/* A captain or coach with no team: the heading carries a mark, and the form
   glows while the drawer is open, until there is one. */
.teamWarn { color: var(--red-x); font-size: 0.9rem; vertical-align: 0.1em; margin-left: 0.2rem; }
.draftDrawer.isOpen .teamForm.needsTeam .teamNameIn,
.draftDrawer.isOpen .teamForm.needsTeam .teamRegionIn,
.draftDrawer.isOpen .teamForm.needsTeam .draftSave { animation: needsTeamGlow 2.2s ease-in-out infinite; }
@keyframes needsTeamGlow {
    0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--gold) 0%, transparent); }
    50%      { box-shadow: 0 0 0 4px color-mix(in srgb, var(--gold) 28%, transparent), 0 0 14px color-mix(in srgb, var(--gold) 30%, transparent); }
}
@media (prefers-reduced-motion: reduce) { .draftDrawer.isOpen .teamForm.needsTeam .teamNameIn, .draftDrawer.isOpen .teamForm.needsTeam .teamRegionIn, .draftDrawer.isOpen .teamForm.needsTeam .draftSave { animation: none; box-shadow: 0 0 0 2px color-mix(in srgb, var(--gold) 30%, transparent); } }
/* A side a temp session cannot take: there, greyed, and the note says why. */
.draftGatePick.isLocked { opacity: 0.45; cursor: default; }
/* Fewer than three on the roster: the + on the seats and Offer in the list
   pulse gold, which is where offers come from, said without a caption. */
.needsOffers .rosterAdd, .needsOffers .offerSend:not([disabled]) { animation: needsOffersPulse 2.2s ease-in-out infinite; }
.needsOffers .rosterAdd { color: var(--gold); border-color: var(--gold-dim); opacity: 1; }
@keyframes needsOffersPulse {
    0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--gold) 0%, transparent); }
    50%      { box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 28%, transparent), 0 0 12px color-mix(in srgb, var(--gold) 30%, transparent); }
}
@media (prefers-reduced-motion: reduce) { .needsOffers .rosterAdd, .needsOffers .offerSend:not([disabled]) { animation: none; box-shadow: 0 0 0 2px color-mix(in srgb, var(--gold) 30%, transparent); } }
/* The team form as a dialog, the moment they become a captain or coach. */
.teamPrompt .teamFields { display: flex; gap: 0.6rem; align-items: center; }
.teamPrompt .teamPromptName { flex: 1 1 auto; min-width: 0; }
/* A captain without a team: a banner under the side pills, centred, that
   opens the drawer on the form and circles it. */
.draftCallBanner {
    display: block; width: fit-content; margin: 0.6rem auto 0;
    padding: 0.3rem 1rem; text-decoration: none; text-align: center;
    background: color-mix(in srgb, var(--gold) 8%, transparent); border: 1px solid var(--gold-dim); border-radius: 6px;
    color: var(--gold); font-family: var(--font-mono); font-size: 0.76rem; cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}
.draftCallBanner:hover { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 14%, transparent); }

/* ---- The page ---------------------------------------------------------- */
/* Full width, like the org overview: three columns of a page, and a max-width
   here puts the same gutter twice -- the page's own, then the empty half of
   each rail's column.
   No top margin: the columns start at the nav's own bottom edge. A margin
   here is a band of nothing across the whole width, and the rails begin below
   it rather than at the top of the page. */
/* Wide enough for the tabs to live in the margin.
   The drawers are pinned to the window's edges, so on a window narrower than
   the content's own measure their tabs sat on top of the first character of
   every heading and the left end of every row. The gutter is what they sit
   in; 20px was the gutter for a page with nothing pinned to it. */
.draftWrap { position: relative; margin: 0 auto 5rem; padding: 0 var(--tab-gutter); }
@media (max-width: 700px) {
    /* The drawer covers most of a phone anyway, so the tab only has to clear
       the text rather than stand apart from it. */
    .draftWrap { padding: 0 44px; }
}
/* The header lives in the middle column now. It is a direct child only on the
   one page with no columns to put it in. */
.draftWrap > .orgLockup, .draftWrap > .draftYou { max-width: 1180px; margin-left: auto; margin-right: auto; }
.draftWrap > .orgLockup { margin-top: 1.6rem; }
/* The lockup carries the page's own margins here rather than the org page's,
   which has a player count under it and this does not. */
.draftWrap .orgLockup { margin-bottom: 0.5rem; }

/* The name and the side, at the top of the column they belong to. Its own top
   padding matches the rails', so the three columns start on one line. */
.draftMidHead { display: block; padding-top: 0.9rem; }
.draftMidHead .draftYou { margin-bottom: 1.6rem; }

/* ---- Who you are here --------------------------------------------------
   Under the title: the name a captain will look you up under, and which side
   of the page you are on. The side is a button because it is the one thing
   you might have got wrong on the way in, and undoing it should not mean
   finding a line of small print at the bottom of a column. */
.draftYou {
    /* Stacked: who you are, then which side you are on. They are two different
       facts and side by side they read as one line about the same thing --
       and the slider is a control, which does not belong on the same line as
       a name. The server stays beside the ID, since it is part of it. */
    display: flex; flex-direction: column; align-items: center;
    gap: 0.6rem;
    margin: 0 0 2.2rem;
}
.draftYouWho { display: flex; align-items: baseline; gap: 0.55rem; }
.draftYouId {
    font-family: var(--font-mono); font-size: 1.15rem;
    color: var(--text); text-decoration: none;
    border-bottom: 1px solid transparent;
}
a.draftYouId:hover { color: var(--gold); border-bottom-color: var(--gold-dim); }
.draftYouNoId { color: var(--text-muted); }
/* The server is part of the name, not a footnote to it: 0.72rem beside a
   1.15rem ID read as an accident. */
.draftYouWhere { font-family: var(--font-mono); font-size: 0.95rem; color: var(--gold-dim); }
.teamRegionFixed {
    align-self: center;
    font-family: var(--font-mono); font-size: 0.78rem; color: var(--gold-dim);
    padding: 0 0.2rem;
}

/* The side, as one control with two ends rather than a label and a button
   that undoes it. */
.sideSlider {
    display: inline-flex; align-items: center; gap: 0;
    padding: 2px;
    border: 1px solid var(--border); border-radius: 999px;
    background: var(--overlay-soft, rgba(255,255,255,0.03));
}
.sideOpt {
    padding: 0.15rem 0.75rem;
    background: none; border: 1px solid transparent; border-radius: 999px;
    color: var(--text-muted);
    font-family: var(--font-mono); font-size: 0.72rem;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s, background 0.15s;
}
/* The groups, and the hairlines between them. Captain and coach sit in one
   division because they are the same answer to "are you staff"; player and
   caster each have their own. A gap between groups would read as three
   sliders. */
.sideGroup { display: inline-flex; align-items: center; gap: 0; }
.sideGroup + .sideGroup { margin-left: 5px; padding-left: 5px; border-left: 1px solid var(--border); }
/* Inside a group the two sit closer than the divisions do, so the pair reads
   as a pair rather than as two more stops on the same track. */
.sideGroup .sideOpt + .sideOpt { margin-left: -2px; }
.sideOpt:hover { color: var(--gold); }
.sideOpt:disabled { opacity: 0.35; cursor: not-allowed; }
.sideOpt:disabled:hover { color: inherit; }
.sideOpt.on {
    color: var(--gold);
    border-color: var(--gold-dim);
    background: rgba(201, 168, 76, 0.12);
    cursor: default;
}
/* No standing warning between the ends. What crossing costs is said in the
   dialog that asks, at the moment you try to cross; on screen the whole time
   it read as an error about the side you were already on. */

/* ---- Your accounts ---------------------------------------------------- */
/* The main account, as a banner at the top of the drawer: icon, name, what it
   is, where. Links to its lookup. */
.mainAcct {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: auto auto auto;
    align-items: center; column-gap: 0.75rem; row-gap: 1px;
    padding: 0.7rem 0.8rem;
    margin-bottom: 0.2rem;
    border: 1px solid var(--gold-dim); border-radius: 10px;
    background: linear-gradient(120deg, color-mix(in srgb, var(--gold) 10%, var(--bg-card)), var(--bg-card));
    color: inherit; text-decoration: none;
    transition: border-color 0.15s;
}
.mainAcct:hover { border-color: var(--gold); }
.mainAcctIcon {
    flex: none; width: 44px; height: 44px; border-radius: 50%;
    border: 1px solid var(--gold-dim); object-fit: cover;
}
.mainAcctIcon.isBlank {
    display: grid; place-items: center;
    background: var(--bg); color: var(--gold);
    font-family: var(--font-head); font-size: 1.4rem;
}
/* Alts: the same banner, smaller and quieter, stacked. */
.altAccts { display: flex; flex-direction: column; gap: 6px; }
.mainAcct.isAlt {
    column-gap: 0.6rem; row-gap: 0; padding: 0.45rem 0.6rem; margin: 0;
    border-color: var(--border); background: var(--bg-card);
}
.mainAcct.isAlt:hover { border-color: var(--gold-dim); }
.mainAcct.isAlt .mainAcctIcon { width: 32px; height: 32px; border-color: var(--border); }
.mainAcct.isAlt .mainAcctIcon.isBlank { font-size: 1rem; }

/* ---- Lanes -------------------------------------------------------------
   The same cards as my.lafter.gg/preferences and the form field, so the three
   places someone can say what they play look like one thing. Smaller here:
   a captain scanning the pool is reading a dozen of these at once. */
.laneCards { display: flex; gap: 0.5rem; flex-wrap: wrap; margin: 0.2rem 0 0.5rem; }
.laneItem {
    display: flex; flex-direction: column; align-items: center; gap: 0.15rem;
    padding: 0.3rem 0.4rem;
    border: 1.5px solid transparent; border-radius: 8px;
    cursor: pointer;
    user-select: none;
    transition: transform 0.15s, border-color 0.2s, opacity 0.2s;
}
.laneItem:hover { transform: scale(1.08); }
.laneItem:focus-visible { outline: 1px solid var(--gold-dim); outline-offset: 2px; }
/* Somebody else's lanes are a fact about them, not a control. */
.laneCards--read .laneItem { cursor: default; }
.laneCards--read .laneItem:hover { transform: none; }
.laneItem.priority-1 { border-color: var(--gold); }
.laneItem.priority-2 { border-color: var(--silver); }
.laneItem.priority-3 { border-color: var(--bronze); }
.laneItem.priority-x { border-color: var(--red-x); opacity: 0.4; }
.laneIcon { width: 34px; height: 34px; }
.laneIcon img { width: 100%; height: 100%; filter: brightness(0.9); }
.laneItem.priority-1 .laneIcon img { filter: brightness(1.1) drop-shadow(0 0 6px var(--gold)); }
.laneItem.priority-x .laneIcon img { filter: grayscale(1) brightness(0.5); }
.laneName { font-family: var(--font-mono); font-size: 0.68rem; color: var(--text-muted); }
/* A fixed box, not a minimum: the label appears on the first click, and a
   row that grows by a pixel and a half under the pointer is the click
   moving the thing you clicked. */
.lanePriority { font-family: var(--font-mono); font-size: 0.55rem; height: 12px; line-height: 12px; overflow: hidden; }
.laneItem.priority-1 .lanePriority { color: var(--gold); }
.laneItem.priority-2 .lanePriority { color: var(--silver); }
.laneItem.priority-3 .lanePriority { color: var(--bronze); }
.laneItem.priority-x .lanePriority { color: var(--red-x); }

/* Still used for the small print under a roster; the pair of "use my X
   answers" buttons this also dressed are a slider now -- see .draftSource. */
.draftLaneSrc { font-family: var(--font-mono); font-size: 0.72rem; color: var(--text-muted); line-height: 1.6; margin: 0; }

/* ---- The team ---------------------------------------------------------- */
.teamForm { display: flex; flex-direction: column; gap: 0.5rem; align-items: flex-start; }
.teamFields { display: flex; gap: 0.4rem; flex-wrap: wrap; width: 100%; }
.teamNameIn { flex: 1; min-width: 160px; }
.teamNameIn {
    background: var(--bg); border: 1px solid var(--border); border-radius: 3px;
    color: var(--text);
    font-family: var(--font-mono); font-size: 0.78rem;
    padding: 0.35rem 0.5rem;
}
.teamNameIn:focus { outline: none; border-color: var(--gold-dim); }
.teamRegion {
    padding: 0.05rem 0.4rem;
    border: 1px solid var(--border); border-radius: 999px;
    font-size: 0.66rem; color: var(--gold-dim);
}
select.teamRegionPick { appearance: none; -webkit-appearance: none; background: none; font-family: var(--font-mono); cursor: pointer; padding-right: 0.9rem;
    background-image: linear-gradient(45deg, transparent 50%, var(--gold-dim) 50%), linear-gradient(135deg, var(--gold-dim) 50%, transparent 50%);
    background-position: calc(100% - 8px) 55%, calc(100% - 5px) 55%; background-size: 3px 3px; background-repeat: no-repeat; }
select.teamRegionPick:hover, select.teamRegionPick:focus { border-color: var(--gold-dim); color: var(--gold); outline: none; }
.teamLive { font-size: 0.66rem; color: var(--gold); text-transform: uppercase; letter-spacing: 0.08em; }
.teamRegionIn { width: 7ch; }
/* Cover, counted apart from the five. */
/* A thin heading over the seats it opens: the sub picker, or the word Coach.
   Left-aligned with the rows under it so it reads as their label. */
.teamCover {
    display: flex; align-items: center;
    margin-top: 0.7rem;
    color: var(--text-muted);
    font-family: var(--font-mono); font-size: 0.68rem;
}
.coverWord { text-transform: uppercase; letter-spacing: 0.08em; opacity: 0.85; }
/* With sub seats open, a rule runs from the picker to the edge, over them. */
.teamCover.hasSubs::after { content: ''; flex: 1 1 auto; height: 1px; margin-left: 0.7rem; background: var(--border); }
/* Midway between the seat above and the seat below: the seat above carries
   its own 5px under it, so the two margins differ by that much. */
.teamRoster + .teamCover { margin-top: 0.35rem; }
.teamCover + .teamRoster { margin-top: 0.65rem; }
/* A field that looks like the heading it is, until you are in it. */
.teamNameEdit {
    /* Shrinks, but does not grow: growing it put the whole header's slack
       behind the name and pushed the server and the count into each other
       at the far end. The slack is shared out below instead. */
    flex: 0 1 auto; width: auto; min-width: 4ch; box-sizing: content-box;
    padding: 1px 4px; margin-left: -4px;
    background: none; border: 1px solid transparent; border-radius: 4px;
    color: inherit; font: inherit;
}
.teamNameEdit:hover:not([readonly]) { border-color: var(--border); }
.teamNameEdit:focus { outline: none; border-color: var(--gold-dim); background: var(--bg); }
.teamNameEdit[readonly] { cursor: default; }
.teamLeaveBtn {
    padding: 0.3rem 0.7rem;
    background: none; border: 1px solid var(--red-x); border-radius: 3px;
    color: var(--red-x);
    font-family: var(--font-mono); font-size: 0.72rem; cursor: pointer;
    transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.teamLeaveBtn:hover { background: var(--red-x); color: var(--on-notify, #fff); }
/* Locking, and -- only when it cannot -- one line saying why. */
/* Lock and Disband on one line. They were two rows with a caption between
   them, which is three lines of a rail for two buttons. */
.teamPublish { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; margin-top: 0.9rem; }
.teamPublish .teamDropBtn { margin-left: auto; }
.teamPublishBtn, .teamUnpublish {
    padding: 0.3rem 0.9rem;
    background: none; border: 1px solid var(--gold-dim); border-radius: 3px;
    color: var(--gold);
    font-family: var(--font-mono); font-size: 0.74rem;
    cursor: pointer;
    transition: border-color 0.2s, color 0.2s, opacity 0.2s;
}
.teamPublishBtn:hover:not([disabled]) { border-color: var(--gold); background: rgba(201, 168, 76, 0.12); }
.teamPublishBtn[disabled] { opacity: 0.4; cursor: default; border-color: var(--border); color: var(--text-muted); }
.teamUnpublish { border-color: var(--border); color: var(--text-muted); }
/* Disbanding is the one button on this panel that takes something away, and
   it sat in the same grey as Edit beside it. */
.teamDropBtn.isDanger { border-color: var(--red-x); color: var(--red-x); }
.teamDropBtn.isDanger:hover { background: var(--red-x); color: var(--on-notify, #fff); border-color: var(--red-x); }
.teamUnpublish:hover { border-color: var(--red-x); color: var(--red-x); }
.teamActions { display: flex; gap: 0.4rem; margin-top: 0.8rem; }
.teamActions[hidden] { display: none; }
.teamEditBtn, .teamDropBtn, .teamEditCancel {
    padding: 0.3rem 0.7rem;
    background: none; border: 1px solid var(--border); border-radius: 3px;
    color: var(--text-muted);
    font-family: var(--font-mono); font-size: 0.72rem;
    cursor: pointer;
    transition: border-color 0.2s, color 0.2s;
}
.teamEditBtn:hover, .teamEditCancel:hover { border-color: var(--gold); color: var(--gold); }
.teamDropBtn:hover { border-color: var(--red-x); color: var(--red-x); }
.teamEditForm { margin-top: 0.8rem; }
.teamEditForm[hidden] { display: none; }
/* ---- The stage: one column, two drawers --------------------------------
 *
 * The middle is the page. Everything else -- what a captain sees when they
 * look at you, and what is waiting on you -- slides in from an edge and slides
 * back out, because neither is what anybody opened this page to read and both
 * were taking a third of it each.
 *
 * The drawers are fixed rather than columns of the grid: a grid track that
 * animates to zero reflows the list beside it on every frame, and the list is
 * the thing that must not move.
 */
.draftStage { position: relative; }
.draftMid {
    min-width: 0;
    /* Centred and measured. Two columns of one-line rows; stretched across a
       1600px window they are rows you read by moving your head. */
    max-width: 1180px;
    margin: 0 auto;
}

/* Who is here, and what they are on. Split rather than stacked: they are read
   against each other -- a name with no team and a team with a seat free are
   the same question from two ends -- and one under the other is a scroll
   between them. A rule down the middle, not a gap: the gap alone reads as two
   pages that happen to be side by side. */
/* One column, five rows each. Side by side they were two directories on a
   page nobody opened to read a directory, and the rule down the middle was
   the page insisting they be read against each other. The heading and the
   space under it are the break now -- no rules anywhere in here. */
.draftSplit { display: block; }
.draftSplit > .draftSplitCol + .draftSplitCol { margin-top: 1.6rem; }
/* A row is six columns wide, not a page wide. Given the whole middle the
   lanes cell soaked up the slack and put the team six hundred pixels from
   the rank it belongs to. */
.poolList, .draftSplitCol > h2, .draftSplitCol > .poolTop, .draftSplitCol > .poolMore { max-width: 1100px; }
/* The heading with its search across from it. The box is the width of its
   one word until it is used, then it grows; the bar keeps its five rows,
   the dialog's copy searches the lot. */
.poolTop { display: flex; align-items: center; gap: 0.8rem; margin: 0 0 0.8rem; }
.poolTop > h2 { margin: 0; }
.poolSearch { margin-left: auto; }
.poolList > .agentCard.isMiss, .poolList > .rivalCard.isMiss { display: none; }
/* In the dialog: the word, the search in the middle, the x. */
.poolTitleRow { display: flex; align-items: center; }
.poolTitleRow .poolSearch { margin: 0 auto; }
/* Everything past the fifth is rendered and hidden, so the overlay shows
   these rows rather than a second copy of them. */
.poolList.isCapped > .agentCard:nth-of-type(n+6),
.poolList.isCapped > .rivalCard:nth-of-type(n+6) { display: none; }
/* What the window cannot hold, once the page has measured it; shown again in the dialog. */
.poolList:not(.poolAll) > .isOverCap { display: none; }
.poolMore[hidden] { display: none; }
.poolMore {
    margin-top: 0.5rem;
    padding: 0.28rem 0.7rem;
    background: none; border: 1px solid var(--border); border-radius: 999px;
    color: var(--text-muted);
    font-family: var(--font-mono); font-size: 0.68rem;
    cursor: pointer;
    transition: border-color 0.2s, color 0.2s;
}
.poolMore:hover { border-color: var(--gold-dim); color: var(--gold); }
/* The whole list, in a box that scrolls. */
.poolAll { max-height: min(58vh, 520px); overflow-y: auto; padding-right: 6px; }
.poolAll .poolHead { position: sticky; top: 0; background: var(--bg-card); z-index: 1; }
/* In the list overlay the dialog's body scrolls, not the list inside it. */
#lafterOverlayBox.is-list .poolAll { max-height: none; overflow: visible; padding-right: 0; }
/* A hundred rows read without the page's spacing around them: a rule under each. */
.poolAll > .agentCard, .poolAll > .rivalCard {
    border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
    border-radius: 0; margin-bottom: 0;
}

.draftDrawer {
    position: fixed;
    top: 0; bottom: 0;
    z-index: 40;
    width: min(360px, 90vw);
    display: flex;
    background: var(--bg-card);
    border: 1px solid var(--border);
    box-shadow: 0 0 32px rgba(0,0,0,0.45);
    transition: transform 0.22s ease;
}
/* The inner edge is the tab's outline carried on.
   The tab is a gold-bordered shape stuck to this edge, so an edge in --border
   made the outline stop dead where the two met -- the tab read as a sticker on
   the drawer rather than a handle of it. Same colour on both, and the seam
   between them is the one line that is not drawn. */
.draftDrawerLeft  { left: 0;  border-left: none;  border-right-color: var(--gold-dim); transform: translateX(-100%); }
.draftDrawerRight { right: 0; border-right: none; border-left-color: var(--gold-dim);  transform: translateX(100%); }
.draftDrawerLeft.isOpen, .draftDrawerRight.isOpen { transform: none; }
/* A drawer restored from the last page load was already open. Sliding it in
   again says it closed, which is what the page looked like it was doing
   every time something inside it saved. */
.draftDrawer.noAnim { transition: none; }
/* The wheel over the drawer stays in it, at the end of its list or with
   nothing to scroll: the page behind never moves for it. */
.draftDrawer, .drawerBody, .poolAll { overscroll-behavior: contain; }

/* The body scrolls only if it has to. It is compacted to fit a normal window
   without scrolling; this is the fallback for a short one, not the plan. */
.drawerBody {
    flex: 1 1 auto;
    min-width: 0;
    overflow-y: auto;
    padding: 1rem 1.1rem 1.4rem;
    scrollbar-width: thin;
}
.drawerBody::-webkit-scrollbar { width: 6px; }
.drawerBody::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
.drawerBody::-webkit-scrollbar-track { background: transparent; }

/* The handle, riding on the drawer's inner edge so it travels with it. It is
   the only part of a closed drawer on screen, so it carries the name of what
   it opens rather than an arrow on its own. */
/* Lit like the bug button, which is the one floating control on this site
   nobody has ever failed to find. --border and --gold-dim on a dark page is a
   shape you have to already know is there. */
.drawerTab {
    position: absolute;
    top: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 46px;
    padding: 0;
    background: var(--bg-card);
    border: 1px solid var(--gold-dim);
    color: var(--gold);
    box-shadow: 0 2px 14px rgba(0,0,0,0.55);
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s, background 0.15s;
}
/* Plus the border: 100% resolves against the PADDING box, and the drawer is
   translated by its whole border box -- so the tab landed a pixel off the
   screen at each edge, which is one pixel of the only part of a closed drawer
   anybody can see. */
.draftDrawerLeft .drawerTab {
    left: calc(100% + 1px);
    transform: translateY(-50%);
    border-left: none;
    border-radius: 0 8px 8px 0;
}
.draftDrawerRight .drawerTab {
    right: calc(100% + 1px);
    transform: translateY(-50%);
    border-right: none;
    border-radius: 8px 0 0 8px;
}
.drawerTab:hover { background: var(--accent); }
.drawerTab svg { width: 22px; height: 22px; }
.draftDrawer.isOpen .drawerTab { color: var(--gold); border-color: var(--gold-dim); }
/* Something a captain cannot see yet: lanes, or a Riot account. */
.drawerTabDot {
    position: absolute;
    top: -6px; left: -7px;
    min-width: 16px; height: 16px;
    box-sizing: border-box;
    border-radius: 8px;
    border: 2px solid var(--bg);
    background: var(--notify);
    color: var(--on-notify);
    font-family: var(--font-mono); font-size: 0.6rem; font-weight: 700;
    line-height: 12px; text-align: center;
    pointer-events: none;
}
/* The left drawer's tab sits on the screen's edge: its dot goes top right,
   where there is a screen to draw it on. */
.draftDrawerLeft .drawerTabDot { left: auto; right: -7px; }

.drawerBody h2, .draftMid h2 {
    font-family: var(--font-head); font-size: 1.4rem;
    color: var(--text); margin: 0 0 0.8rem;
}
.drawerBody h2 { font-size: 1.2rem; margin-bottom: 0.6rem; }
.drawerBody h2:not(:first-child), .draftMid h2:not(:first-child) { margin-top: 1.4rem; }
/* Read lanes from: the org's forms as banners, the linked one lit. */
.formPick { display: flex; flex-direction: column; gap: 6px; }
.formPickRow {
    display: flex; align-items: baseline; justify-content: space-between; gap: 0.8rem; width: 100%; text-align: left;
    padding: 0.55rem 0.7rem;
    background: var(--overlay-soft); border: 1px solid var(--border); border-radius: 8px;
    color: var(--text); font-family: var(--font-mono); font-size: 0.78rem; cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}
.formPickRow:hover { border-color: var(--gold-dim); }
.formPickRow.isOn { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 10%, var(--overlay-soft)); }
.formPickRow.isOn .formPickTitle { color: var(--gold); }
.formPickTitle { min-width: 0; }
.formPickNote { flex: none; font-size: 0.66rem; color: var(--text-muted); }
.formPickRow.noLanes .formPickTitle { color: var(--text-muted); }
/* A heading with a line beside it: where the lanes are read from, and the
   pencil for whoever can change that. */
.draftH2Row { display: flex; align-items: baseline; gap: 0.6rem; margin-top: 1.4rem; margin-bottom: 0.6rem; min-width: 0; }
.draftH2Row h2 { margin: 0; flex: none; }
.draftPull { font-family: var(--font-mono); font-size: 0.66rem; color: var(--text-muted); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.draftPull a { color: var(--gold); text-decoration: none; }
.draftPull a:hover { color: var(--gold-light); }
.draftPullSet {
    flex: none; width: 20px; height: 20px; padding: 0; align-self: center;
    background: none; border: 1px solid var(--border); border-radius: 4px;
    color: var(--text-muted); font-size: 0.7rem; line-height: 1; cursor: pointer;
}
.draftPullSet:hover { color: var(--gold); border-color: var(--gold-dim); }
.inboxNew {
    font-family: var(--font-mono); font-size: 0.66rem; color: var(--gold);
    vertical-align: middle;
}
.draftRailInbox .offerCard { background: none; border: none; border-bottom: 1px solid var(--border); border-radius: 0; padding: 0.7rem 0; margin: 0; }
.draftRailInbox .draftInboxList { padding: 0; }

/* ---- The panel's own sizes ---------------------------------------------
   The drawer is one screen and stays one screen. Everything in here is the
   same control it was, at the size that lets the whole panel be read without
   moving it. */

/* Five banners across the panel, not five cards with air between them: the
   row is a choice of five and it should look like one strip of five. Each one
   is an equal share of the width, and the icon sits in the middle of its own
   banner rather than wherever the label left room. */
.drawerBody .laneCards {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 5px;
    margin: 0.2rem 0 0.7rem;
}
.drawerBody .laneItem {
    width: auto;
    padding: 7px 2px 5px;
    gap: 2px;
    border-width: 1.5px;
    border-color: var(--border);
    background: var(--overlay-soft);
}
.drawerBody .laneItem.priority-1 { border-color: var(--gold); }
.drawerBody .laneItem.priority-2 { border-color: var(--silver); }
.drawerBody .laneItem.priority-3 { border-color: var(--bronze); }
.drawerBody .laneItem.priority-x { border-color: var(--red-x); }
/* Hover lifted the card out of its own row. A border that brightens says the
   same thing without moving five things to show one. */
.drawerBody .laneItem:hover { transform: none; border-color: var(--gold-dim); }
.drawerBody .laneIcon { width: 26px; height: 26px; }
.drawerBody .laneName { font-size: 0.6rem; line-height: 1.2; }
.drawerBody .lanePriority { font-size: 0.56rem; }

/* Where the lanes came from, as one control with two ends -- the same shape
   as the Player/Captain slider, because it is the same kind of question.
   Neither end lit is the third state and the real one: you set them yourself. */
.draftSource {
    display: flex; align-items: center; gap: 0;
    padding: 2px;
    border: 1px solid var(--border); border-radius: 999px;
    background: var(--overlay-soft);
    width: 100%;
    margin-bottom: 1rem;
}
.srcOpt {
    flex: 1 1 0; min-width: 0;
    padding: 0.2rem 0.5rem;
    background: none; border: 1px solid transparent; border-radius: 999px;
    color: var(--text-muted);
    font-family: var(--font-mono); font-size: 0.66rem;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s, background 0.15s;
}
/* The org's name in its face and Lafter's wordmark, a hairline between. */
.srcRule { flex: none; width: 1px; align-self: stretch; margin: 5px 2px; background: color-mix(in srgb, var(--text-muted) 45%, transparent); }
.srcOpt .orgFont { font-size: 0.8rem; }
.srcOpt .wordmark { font-size: 1rem; line-height: 1; }
.srcOpt:not(.on) .orgFont, .srcOpt:not(.on) .wordmark { opacity: 0.6; }
.srcOpt:hover .orgFont, .srcOpt:hover .wordmark { opacity: 1; }
.srcOpt:hover { color: var(--gold); }
.srcOpt.on {
    color: var(--gold);
    border-color: var(--gold-dim);
    background: rgba(201, 168, 76, 0.12);
}

/* The box gets the space, not the gaps around it.
   A label, a stripe of nothing, a three-line box, a wider stripe of nothing,
   then Save -- the panel was mostly the nothing. The gaps are as small as they
   can be while still separating three things, and the box takes what is left:
   people write two sentences in here and three lines was one and a half. */
.drawerBody .draftMe { gap: 0.25rem; }
.drawerBody .draftLabel { display: block; font-size: 0.68rem; margin: 0.4rem 0 0.15rem; }
.drawerBody textarea {
    font-size: 0.72rem;
    width: 100%; box-sizing: border-box;
    min-height: 7rem;
    line-height: 1.55;
}
.drawerBody .draftSave { margin-top: 0; }
/* Against the bottom of the box it saves, not a gap below it. */
.draftSaveRow { display: flex; align-items: center; gap: 0.6rem; margin-top: 0.3rem; }
.drawerBody .teamRoster { margin: 0; }
.drawerBody .rosterRow { padding: 5px 0; }
.drawerBody .draftNote { font-size: 0.68rem; padding-top: 0.5rem; }


/* ---- Who has them ------------------------------------------------------
   The team beside the name, which is what makes this one list instead of two.
   A chip rather than another column: most rows have no team and a column of
   blanks is a column. */
.agentTeam {
    /* Role is what pushes the end of the line right; everything after it
       packs against it -- the team chip, or the offer control on the rows
       that have one. The two never appear together. */
    min-width: 0;
    overflow: hidden;
    display: inline-flex; align-items: baseline; gap: 6px;
    padding: 1px 8px;
    /* --border is a rule between rows and disappears as an outline around
       one. The chip has to be a shape on a card that is already a card. */
    border: 1px solid color-mix(in srgb, var(--text-muted) 38%, transparent);
    border-radius: 999px;
    font-family: var(--font-mono); font-size: 0.68rem;
    color: var(--text-muted);
    white-space: nowrap;
}
/* Published is a claim somebody has made; building is working notes. They are
   different answers to "can I have this player", so they do not look alike. */
.agentTeam.isLive { border-color: var(--gold-dim); color: var(--gold); }
/* Taken rows stay in the list and stay readable -- who has whom is the point
   of showing them -- but they are not the rows you are scanning for. */
.agentCard.isTaken { opacity: 0.72; }
.agentCard.isTaken:hover { opacity: 1; }
/* Your own row. The left edge is already there and transparent on every row,
   so it costs nothing to colour it, and gold down one edge is findable in a
   list of thirty without pulling the eye off the rest of them. Full strength
   even on a team: dimmed is for rows you are not scanning for, and yours is
   the one you came to check. */
.agentCard.isMe {
    border-left-color: var(--gold-dim);
    background: rgba(201, 168, 76, 0.07);
}
.agentCard.isMe.isTaken { opacity: 1; }
/* The row hover is later in the file and would take the wash off the one row
   that has a reason for it. */
.agentCard.isMe:hover { background: rgba(201, 168, 76, 0.12); }
.agentCard.isMe .agentRiot { color: var(--gold); }

/* No gap where the free agents end. It was meant as the break between free
   and taken, had no label saying so, and read as a layout bug -- and once the
   columns sort, "a free row followed by a taken one" happens anywhere down the
   list. The team chip and the dimmed row already say who is taken. */
.poolCount { font-family: var(--font-mono); font-size: 0.72rem; color: var(--text-muted); vertical-align: baseline; margin-left: 0.6rem; }

.draftCol h2 {
    font-family: var(--font-head); font-size: 1.4rem;
    color: var(--text); margin: 0 0 0.8rem;
}
.draftCol h2 + * { margin-top: 0; }
.draftCol h2:not(:first-child) { margin-top: 1.4rem; }
.draftEmpty {
    color: var(--text-muted);
    font-family: var(--font-mono); font-size: 0.8rem; line-height: 1.7;
}

.teamCard, .agentCard {
    border: 1px solid var(--border);
    border-radius: 3px;
    padding: 0.9rem 1rem;
    margin-bottom: 0.6rem;
    background: var(--bg-card);
}
/* No rule between rows. A line under every name is thirty lines down a page
   whose whole job is names, and the row you are on is the only one that needs
   marking out -- so the hover does it, as a bubble around the row. */
.agentCard {
    border: none;
    border-left: 2px solid transparent;
    border-radius: 7px;
    background: none;
}
/* Name, server, count: three things and two gaps. Two auto margins split the
   free space evenly between them, so the server sits midway rather than
   bunched against the count with a hole after the name. */
/* Centred, not on a baseline: the icon button is the tallest thing in the
   row, and baseline alignment left the name riding above its middle. */
.teamName { display: flex; align-items: center; gap: 0.5rem; font-family: var(--font-mono); font-size: 0.9rem; color: var(--text); }
/* The team's icon, beside its name wherever it is. */
.teamIcon { display: inline-block; width: 1em; height: 1em; vertical-align: -0.15em; }
.teamIconSlot:not(.isEmpty) { margin-right: 0.35em; }
.teamIconSlot:empty { display: none; }
/* An icon column, players and teams alike: the face or the team's icon at
   the left of the name, under a blank head. */
/* Sat on the text's baseline like a letter, its foot level with the
   letters' feet, nestled against the name and against the row's left edge:
   the row's gap is pulled back on both sides of it. */
.agentIcon, .rivalIcon { flex: none; display: inline-flex; align-items: center; justify-content: center; line-height: 0; margin-left: -0.25rem; margin-right: -1rem; }
.agentIcon { width: 26px; height: 26px; }
.rivalIcon { width: 22px; height: 22px; }
.agentIcon img { width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid var(--gold-dim); object-fit: cover; display: block; }
.agentCard.isMe .agentIcon img { border-color: var(--gold); }
.rivalIcon .teamIconSlot { display: inline-flex; margin: 0; }
.rivalIcon .teamIcon { width: 1.35rem; height: 1.35rem; vertical-align: 0; }
/* A name that runs out of room: cut clean with a white …, the whole of it
   in a bubble on hover (draft.js). */
/* The dots have room of their own: the text stops short of them rather
   than running on underneath. */
.clipWrap { position: relative; display: inline-flex; min-width: 0; max-width: 100%; overflow: hidden; }
.clipWrap > span { display: block; min-width: 0; white-space: nowrap; overflow: hidden; }
.clipWrap.isLong > span { margin-right: 1.1em; }
.clipWrap.isLong::after { content: '…'; position: absolute; right: 0; top: 0; color: var(--text); pointer-events: none; }
/* In a chip the mark is the chip's own colour, grey or gold. */
.agentTeam .clipWrap.isLong::after { color: inherit; }
.rivalName { display: inline-flex; }
/* The picker button is the icon itself -- the team's, or a noob's face
   until one is picked. No ring. */
.teamIconPick {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2rem; height: 2rem; padding: 0; align-self: center;
    background: none; border: 1px solid transparent; border-radius: 50%;
    color: var(--text-muted); cursor: pointer; transition: border-color 0.15s, color 0.15s;
}
.teamIconPick:hover { border-color: var(--gold-dim); color: var(--gold); }
.teamIconPick .teamIconSlot { margin: 0; display: inline-flex; align-items: center; justify-content: center; line-height: 0; }
.teamIconPick .teamIcon { width: 1.7rem; height: 1.7rem; vertical-align: 0; display: block; }
.teamIconPick .teamIconSlot.isEmpty { display: inline-flex; }
/* The Teams list wears the face too, where a team has none yet. */
.rivalIcon .teamIconSlot.isEmpty { display: inline-flex; color: var(--text-muted); }
.iconPick { display: flex; flex-direction: column; gap: 12px; }
.iconPickShapes { display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; }
.iconPickShape {
    display: flex; align-items: center; justify-content: center; aspect-ratio: 1;
    background: var(--bg); border: 1px solid var(--border); border-radius: 8px; cursor: pointer;
}
.iconPickShape .teamIcon { width: 1.4rem; height: 1.4rem; }
.iconPickShape:hover { border-color: var(--gold-dim); }
.iconPickShape.on { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 10%, transparent); }
/* The colours as one bar along the bottom, a segment each; the chosen
   segment stands proud with a ring. */
.iconPickColours { display: flex; height: 22px; border-radius: 999px; overflow: visible; }
.iconPickColour {
    flex: 1; height: 100%; padding: 0;
    border: 0; background: var(--c); cursor: pointer;
    transition: transform 0.12s, box-shadow 0.12s;
}
.iconPickColour:first-child { border-radius: 999px 0 0 999px; }
.iconPickColour:last-child { border-radius: 0 999px 999px 0; }
.iconPickColour:hover { transform: scaleY(1.18); }
.iconPickColour.on { transform: scaleY(1.35); border-radius: 4px; box-shadow: 0 0 0 2px var(--bg), 0 0 0 3.5px var(--text); position: relative; z-index: 1; }
/* Any hue: a line under the picks, dragged to the colour wanted. */
.iconPickHue {
    -webkit-appearance: none; appearance: none; width: 100%; height: 8px; margin: 0; border-radius: 999px; cursor: pointer;
    background: linear-gradient(90deg, hsl(0 72% 58%), hsl(60 72% 58%), hsl(120 72% 58%), hsl(180 72% 58%), hsl(240 72% 58%), hsl(300 72% 58%), hsl(360 72% 58%));
}
.iconPickHue::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 6px; height: 18px; border-radius: 3px; background: var(--text); border: 1px solid var(--bg); cursor: pointer; }
.iconPickHue::-moz-range-thumb { width: 6px; height: 18px; border-radius: 3px; background: var(--text); border: 1px solid var(--bg); cursor: pointer; }
/* The region beside the name; the count takes the far end. */
.teamName .teamCount { margin-left: auto; }
.teamCount { margin-left: auto; color: var(--gold-dim); }
.teamRoster { list-style: none; margin: 0.7rem 0 0; padding: 0; }
.rosterRow {
    display: grid;
    /* Name, seat, and the ×. The server came out: a team is region locked, so
       a column of it is the team's own server once per member. */
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center; column-gap: 0.45rem; row-gap: 1px;
    padding: 4px 0;
    font-family: var(--font-mono); font-size: 0.72rem; color: var(--text-muted);
}
.rosterWho   { color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Level and rank, with air between them: they ran together as one string. */
.rosterUnder {
    grid-column: 1 / -1;
    display: flex; gap: 0 1.1rem;
    color: var(--text-muted); font-size: 0.68rem;
}
.rosterLvl  { width: 8ch; flex: none; }
.rosterRank { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rosterSeat  { color: var(--gold-dim); }
/* Sized to its widest option: "Captain" plus the arrow did not fit 10ch and
   came out "Captai". Three short options, so there is nothing to run away
   with here. */
.rosterSeatPick,
.teamSubsPick {
    width: auto;
    padding: 0.1rem 0.2rem;
    background: var(--bg); border: 1px solid var(--border); border-radius: 3px;
    color: var(--text-muted);
    font-family: var(--font-mono); font-size: 0.68rem;
}
.rosterSeatPick:focus,
.teamSubsPick:focus { outline: none; border-color: var(--gold-dim); }
/* An empty seat is a banner's worth of room: the same height, dashed. */
.teamRoster .rosterOpen {
    display: flex; align-items: center; justify-content: space-between; min-height: 42px;
    padding: 0.4rem 0.55rem; margin: 0 0 5px;
    border: 1px dashed var(--border); border-radius: 9px;
    color: var(--text-muted); font-family: var(--font-mono); font-size: 0.7rem; font-style: italic; opacity: 0.6;
}

/* A light + at the seat's right edge: the players list, free agents on
   the team's region already picked out. */
.rosterAdd {
    flex: none; width: 20px; height: 20px; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    background: none; border: 1px solid var(--border); border-radius: 50%;
    color: var(--text-muted); font-family: var(--font-mono); font-size: 0.9rem; font-style: normal; line-height: 1;
    opacity: 0.7; cursor: pointer; transition: color 0.15s, border-color 0.15s, opacity 0.15s;
}
.rosterAdd:hover { color: var(--gold); border-color: var(--gold-dim); opacity: 1; }
/* Opened out, the lanes cell stops growing: the dialog is wider than the
   page's column and it was taking all of the difference. */
.poolAll .agentPos { flex: 0 0 26ch; }
.poolAll .agentFa { margin-left: auto; }

.sentRow {
    /* The lanes cell is one line, at most a third of the row, cut with … and lifted on hover. */
    display: grid; grid-template-columns: minmax(0, 1fr) fit-content(36%) auto; gap: 0.6rem; align-items: center;
    padding: 0.5rem 0; border-bottom: 1px solid var(--border);
    font-family: var(--font-mono); font-size: 0.78rem; color: var(--text-muted);
}
.sentTeam { color: var(--gold-dim); min-width: 0; white-space: nowrap; }

/* ---- The pool ----------------------------------------------------------
   One line per player, not a card with a paragraph in it. A captain reads
   thirty of these looking for a mid laner, which is a list, and a list is
   read down a column: every cell is a fixed width in ch on the mono face so
   the level under the level and the rank under the rank. What does not fit
   wraps as a group rather than shrinking a column out of alignment.

   The controls sit at the end of the same line. They were under a paragraph
   saying "create a team and you can offer them a place", once per player,
   which is the same sentence thirty times. */
/* Tight. Thirty of these is a list, and a list is read by running down it --
   every row that is taller than its own text is a row of air between two
   names. */
.agentCard { padding: 0.3rem 0.55rem; margin-bottom: 1px; }
/* Which row you are on, across six columns of mono at 0.68rem. */
.agentCard:hover { background: var(--row-hover); }
.agentLine {
    /* One line a row, whatever the width: the lanes cell gives before
       anything wraps. A second region on a row was enough to fold the
       Team cell and the Offer button under the name. Centred on the
       face's height, so the text sits midway rather than on its foot. */
    display: flex; flex-wrap: nowrap; align-items: center;
    /* Every cell is exactly as wide as its longest value, so the gap is the
       only thing between them: at 0.35rem "Lv 1953" and "Diamond IV" touch.
       Two characters of mono, so a column always ends before the next one
       starts. */
    gap: 0.15rem 1.4rem;
    font-family: var(--font-mono); font-size: 0.68rem;
}
.agentRiot {
    width: 22ch; flex: none;
    color: var(--text); text-decoration: none;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
a.agentRiot:hover { color: var(--gold); }
.agentNoId { color: var(--text-muted); }
/* Fixed-width cells in a wrapping row, so every one of them has to say it
   will not wrap -- without that the box just breaks the value in half and
   "Lv 1953" comes out as "Lv" above "1953". Widths are the longest value each
   can hold: "Lv 9999", and "Platinum III" at twelve, which is longer than
   "Grandmaster". The ellipsis is for whatever turns up longer than that. */
/* Lanes take the slack. Every other cell is a fixed width, so the row used to
   end wherever the last fixed cell happened to stop and the rest of the card
   was dead space. The one that varies goes last and absorbs it, and the team
   chip or the offer control still pins to the right of everything. */
/* Room for all five lanes with their marks on a normal window; on a narrow
   one it is the cell that gives, ending in … with the run in a bubble on
   hover, rather than the row running past the list's edge. */
.agentPos   { flex: 1 1 22ch; min-width: 0; color: var(--gold-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agentLvl   { width: 8ch;  flex: none; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agentRank  { width: 12ch; flex: none; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agentWhere { width: 7.5ch; flex: none; color: var(--gold-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* What they signed up as, at the end of the line beside the team that has
   them. It sat after the name, which pushed the server a column away from the
   account it belongs to. Player is the common case and stays quiet; anything
   else is the thing worth seeing.

   Fixed, like every other cell: the lanes cell takes the row's slack, so
   this and the cell after it are the last two columns at a fixed offset from
   the right edge rather than wherever each row happens to end. */
.agentRole { width: 8ch; flex: none; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* The end of the line: a team chip, an Offer button, or nothing. One cell of
   one width, so Role beside it lands in the same place on every row and the
   titles above both point at something. */
.agentEnd {
    width: 12ch; flex: none;
    display: flex; align-items: baseline; justify-content: flex-end; gap: 0.35rem;
    min-width: 0;
}
.agentRole.isStaff { color: var(--gold); }
/* Someone eligible because they said they would play here, not because they
   have an account here. Worth saying: it is a different fact. */
.agentCard .offerSend { flex: none; padding: 0.15rem 0.5rem; font-size: 0.7rem; }
/* The region belongs to the heading it sits in, so it is sized against it
   rather than against the small print. At 0.7rem beside a heading it read as
   a footnote that had drifted up a line. */
.poolWhere { font-family: var(--font-mono); font-size: 0.86rem; color: var(--gold-dim); vertical-align: baseline; margin-left: 0.15rem; }
.offerNone { font-family: var(--font-mono); font-size: 0.68rem; color: var(--text-muted); font-style: italic; }

/* Column titles. Built out of the same cell classes as a row, because a
   title that is merely near its column is worse than none -- you read it,
   miscount, and check the next one. Small and uppercase so it reads as the
   label of a column rather than another value in it. */
.poolHead {
    /* One line, like the rows under it: wrapping put Team under Player. */
    display: flex; flex-wrap: nowrap; align-items: center;
    gap: 0.15rem 1.4rem;
    /* The rows carry a 2px left edge for the highlight, so the header carries
       one too or it sits two pixels left of every column it names. */
    padding: 0 0.55rem 0.4rem;
    border-left: 2px solid transparent;
    border-bottom: 1px solid var(--row-rule);
    /* ch is the width of a zero in the element's OWN font, so a header set
       smaller than its rows has narrower cells than the columns it names and
       drifts further left at every one. Same size as a row; uppercase and
       muted is what makes it a header. */
    font-family: var(--font-mono); font-size: 0.68rem;
    letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--text-muted); opacity: 0.85;
}
/* The cell classes carry colours -- gold for the server, text for the name.
   A title is a title whichever column it is over. */
.poolHead > span, .poolHead > button { color: inherit; }
/* A title is a button now: same type, same size, no chrome, and the arrow
   that says which way it is pointing appears only once it is. */
.poolHead > button {
    padding: 0; margin: 0; text-align: left;
    background: none; border: none;
    font: inherit; letter-spacing: inherit; text-transform: inherit;
    cursor: pointer;
}
.poolHead > button:hover { color: var(--text); }
.poolHead > button:focus-visible { outline: 1px solid var(--gold-dim); outline-offset: 2px; }
.poolHead > button[data-dir] { color: var(--gold); }
.poolHead > button[data-dir]::after { content: ' \2191'; }
.poolHead > button[data-dir="-1"]::after { content: ' \2193'; }
/* Team says which of its three it is on, since none of them is up or down. */
.poolHead > button[data-mode] { color: var(--gold); }
.poolHead > button[data-mode]::after { content: ' \00b7 ' attr(data-mode-label); }

/* An offer out, and one turned down. Declined is still a button -- a no to one
   offer is not a no to every one -- but it says what happened first. */
/* Sent: the same button, quiet, until Revoke in the drawer wakes it. */
.offerSend[disabled] { color: var(--gold-dim); border-color: var(--border); opacity: 0.7; cursor: default; }
.offerSend[disabled]:hover { color: var(--gold-dim); border-color: var(--border); }
/* The lane somebody took the seat for, beside their name on the roster. */

.agentCard .offerSend[data-declined] { border-color: var(--red-x); color: var(--red-x); }
.agentCard .offerSend[data-declined]:hover { background: color-mix(in srgb, var(--red-x) 14%, transparent); }
/* Team and Seats sit against the right of their cells, where the chip and the
   count under them do. */
.poolHead > button.poolHeadEnd { text-align: right; }
/* The Teams list has no Role or end cell, so its last column carries the
   push on its own. */
.poolHeadEnd { margin-left: auto; flex: none; }

/* ---- The other teams --------------------------------------------------- */
/* A team is one line too, the same size as a player, because the two columns
   are read together and two different row heights across a rule is two lists.
   "building" and "published" were a word that said nothing anybody could use;
   the seats say it -- 4/5 is a team with a place in it. */
/* The same gap as the header over it, or the titles drift off their columns. */
.rivalCard {
    display: flex; flex-wrap: nowrap; align-items: center;
    gap: 0.15rem 1.4rem;
    cursor: pointer;
    padding: 0.3rem 0.55rem; margin-bottom: 1px;
    border: none;
    border-left: 2px solid transparent;
    border-radius: 7px;
    background: none;
    font-family: var(--font-mono); font-size: 0.68rem;
}
.rivalCard:hover { background: var(--row-hover); }
.rivalCard:focus-visible { outline: 1px solid var(--gold-dim); outline-offset: -1px; }
a.rivalName { text-decoration: none; }
a.rivalName:hover { color: var(--gold); }
/* The team overlay: its line, then its people as banners. */
.teamView .draftProfileLine { margin-bottom: 0.8rem; }
.teamView .teamViewList { display: grid; gap: 6px; }
.teamView .mainAcct { cursor: pointer; }
.teamViewSeat { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); margin: 0.6rem 0 0.25rem; }
.rivalName  { width: 16ch; flex: none; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rivalWhere { width: 7ch;  flex: none; color: var(--gold-dim); }
.rivalCap   { flex: 1; min-width: 0; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* A link, like the names in the list above: same colour until you are on it,
   because a row of gold links is a row you cannot read down. */
a.rivalCap { text-decoration: none; }
a.rivalCap:hover { color: var(--gold); }
.rivalCount { flex: none; margin-left: auto; color: var(--text-muted); }
/* A seat free is the one thing on this row anybody acts on. */
.rivalCount.hasRoom { color: var(--gold); }
/* Published is a claim somebody has made; a roster still being built is
   working notes. The edge says which without a word for it -- on the left,
   where a column of them is a column, and not on the rule between rows,
   which now means something else. */
.rivalCard.isLive { border-left-color: var(--gold-dim); }
/* ---- The offer dialog ---------------------------------------------------
   Their banners, as they set them. A lane dropped from the offer keeps its
   priority badge and border: "their 1st, and I am not asking for it" is a
   different thing to know than "they never ranked it", and the dropdown this
   replaced could say neither. */
.offerLanes { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; margin: 0.1rem 0 1rem; }
.offerLane { padding: 7px 2px 5px; gap: 2px; border-width: 1.5px; background: var(--overlay-soft); }
/* :where, so this default never outranks the "in the offer" gold below. */
.offerLane:where(:not(.priority-1):not(.priority-2):not(.priority-3):not(.priority-x)) { border-color: var(--border); }
.offerLane:hover { transform: none; border-color: var(--gold-dim); }
/* Out of the offer, not struck off their profile -- greyed, and one click
   back in, because asking somebody to fill a lane they did not ask for is
   allowed, it just is not the default. */
/* A lane they will not play: the card fades, not the red x on it. */
.offerLane.priority-x { opacity: 1; }
.offerLane.priority-x .laneIcon, .offerLane.priority-x .laneName { opacity: 0.4; }
/* Out of the offer: icon and name fade, their priority stays readable. */
/* A lane in the offer is lit whole -- the tile, not only its icon. */
.offerLanes .offerLane:not(.isOut) { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 9%, var(--overlay-soft)); }
.offerLanes .offerLane:not(.isOut) .laneName { color: var(--gold); }
.offerLane.isOut { border-color: var(--border); background: var(--overlay-soft); }
.offerLane.isOut .laneIcon, .offerLane.isOut .laneName { opacity: 0.32; }
.offerLane.isOut .laneIcon img { filter: grayscale(1) brightness(0.6); }
.offerLane.isOut:hover .laneIcon, .offerLane.isOut:hover .laneName { opacity: 0.6; }
.offerDialog .laneName { font-size: 0.62rem; }
.offerLanes[hidden], .offerLanesHead[hidden] { display: none; }
.offerLanesHead { display: block; font-size: 0.72rem; color: var(--text-muted); margin-bottom: 5px; }
/* "Offer <name>" with the seat picker at the end of the same line. */
.offerTitle { display: flex; align-items: baseline; gap: 0.4em; min-width: 0; }
.offerTitle a { color: var(--gold); text-decoration: none; }
.offerTitle a:hover { color: var(--gold-light); }
/* The name scrolls sideways when it runs long, a white … at its edge;
   hovering the title opens it out in full. */
.offerWhoWrap { position: relative; display: flex; flex: 1 1 auto; min-width: 0; }
.offerWho { display: block; min-width: 0; white-space: nowrap; overflow-x: auto; scrollbar-width: none; padding-right: var(--script-overhang); }
.offerWho::-webkit-scrollbar { display: none; }
.offerWhoWrap.isLong::after {
    content: '…'; position: absolute; right: 0; top: 0; padding-left: 14px;
    color: var(--text); font-family: var(--font-mono); font-size: 0.6em; line-height: 2; pointer-events: none;
    background: linear-gradient(90deg, transparent, var(--bg-card) 50%);
}
/* Hovered, the whole name lifts into the bubble (draft.js); nothing reflows. */
.offerPicks { flex: none; margin-left: auto; align-self: center; display: flex; gap: 0.4em; }
/* A row opens the player's profile. */
.agentCard[data-profile] { cursor: pointer; }
.agentCard[data-profile]:focus-visible { outline: 1px solid var(--gold-dim); outline-offset: -1px; }
.draftProfile .mainAcct { margin-bottom: 0.5rem; }
.draftProfileLine { margin: 0 0 0.9rem; font-family: var(--font-mono); font-size: 0.72rem; color: var(--text-muted); }
.offerLanes.isStatic .laneItem { cursor: default; }
.draftProfile .altAccts { display: grid; gap: 6px; }
/* Their note, as they wrote it. */
.offerTheirNote { margin: 0 0 0.9rem; }
.offerTheirNote p {
    margin: 0; padding: 0.5rem 0.7rem;
    border-left: 2px solid var(--gold-dim); background: var(--overlay-soft);
    font-family: var(--font-mono); font-size: 0.74rem; color: var(--text); line-height: 1.5;
    white-space: pre-wrap; overflow-wrap: anywhere;
}
.offerRegion,
.offerSeat {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--text);
    font-family: var(--font-mono); font-size: 0.76rem;
    padding: 0.3rem 0.5rem;
    cursor: pointer;
}
.offerSeat:focus { outline: none; border-color: var(--gold-dim); }

/* Free agent, level with the heading it answers. */
.draftMeHead { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; margin-bottom: 0.6rem; }
.drawerBody .draftMeHead h2 { margin: 0; }
.drawerBody .draftMeHead:not(:first-child) { margin-top: 1.4rem; }
.draftMeHead.isBare { justify-content: flex-end; }
.drawerBody .draftMe.isBare:not(:first-child) { margin-top: 1.2rem; }
.draftMeHead .faToggle { flex: none; }
/* The row's own margins would pull its text up off the pill's centre line. */
.draftMeHead > .draftH2Row { margin: 0; }
/* Requests and Offers under the Draft heading. */
/* Abandon: last in the drawer, bottom right. */
/* The drawer's body is a column, so Abandon can sit at its foot: at the
   bottom of the drawer when the rest is short, at the end of it when it
   scrolls. It never rides up behind the last section. */
.drawerBody.draftRailMine { display: flex; flex-direction: column; }
.drawerBody.draftRailMine > * { flex: none; }
.draftAbandon { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; margin-top: auto; padding-top: 0.5rem; border-top: 1px solid var(--border); }
.drawerBody.draftRailMine > .draftAbandon { margin-top: auto; }
.drawerBody.draftRailMine > :not(.draftAbandon):nth-last-child(2) { margin-bottom: 0.9rem; }
.draftAbandonAsk { font-family: var(--font-mono); font-size: 0.7rem; color: var(--text-muted); }
.draftAbandonBtn { background: none; border: 1px solid color-mix(in srgb, var(--red-x) 45%, transparent); border-radius: 4px; padding: 0.25rem 0.8rem; color: var(--red-x); font-family: var(--font-mono); font-size: 0.7rem; cursor: pointer; opacity: 0.8; }
.draftAbandonBtn:hover { opacity: 1; background: color-mix(in srgb, var(--red-x) 12%, transparent); border-color: var(--red-x); }
.draftSub { margin: 0.7rem 0 0.2rem; font-family: var(--font-mono); font-size: 0.62rem; font-weight: 400; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); }
.draftSub[hidden], .draftSent .draftEmpty[hidden] { display: none; }

.offerPos, .draftMe input, .draftMe textarea {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 3px;
    color: var(--text);
    font-family: var(--font-mono); font-size: 0.76rem;
    padding: 0.35rem 0.5rem;
}
.offerPos { flex: 1; min-width: 100px; }
.offerPos:focus, .draftMe input:focus, .draftMe textarea:focus { outline: none; border-color: var(--gold-dim); }

.draftMe { display: flex; flex-direction: column; gap: 0.4rem; }
.draftLabel { font-family: var(--font-mono); font-size: 0.74rem; color: var(--text-muted); margin-top: 0.5rem; }
.draftMe textarea { resize: vertical; line-height: 1.6; }
/* Save is the one thing this form is for, and a 1px --border on the page's
   own background is a button you have to hunt for. Same weight as Publish:
   the committing action on a panel reads as a button, not as an outline. */
.draftSave {
    align-self: flex-start; margin-top: 0.8rem;
    border-color: var(--gold-dim);
    color: var(--gold);
}
.draftSave:hover { background: rgba(201, 168, 76, 0.12); }
.draftSaved { font-family: var(--font-mono); font-size: 0.72rem; color: var(--gold-dim); margin-left: 0.6rem; }

.draftSetup {
    border: 1px solid var(--gold-dim); border-radius: 3px;
    padding: 1.6rem; max-width: 620px;
}
.draftSetup h2 { font-family: var(--font-head); font-size: 1.4rem; color: var(--text); margin: 0 0 0.6rem; }
.draftSetup p { font-family: var(--font-mono); font-size: 0.8rem; color: var(--text-muted); line-height: 1.7; margin: 0; }
.draftSetup code { color: var(--gold-dim); }

/* ---- The way in --------------------------------------------------------
   Not dismissible: this is the question the page is waiting on, not an
   interruption to it. The scrim covers the content because reading it before
   answering would be reading the wrong half. */
.draftGateWrap {
    position: fixed; inset: 0; z-index: 2000;
    display: grid; place-items: center;
    background: rgba(0, 0, 0, 0.72);
    backdrop-filter: blur(2px);
}
.draftGate {
    background: var(--bg-card);
    border: 1px solid var(--gold-dim);
    border-radius: 4px;
    padding: 2rem;
    width: min(520px, calc(100vw - 2.5rem));
    text-align: center;
}
.draftGate h2 { font-family: var(--font-head); font-size: 1.7rem; color: var(--text); margin: 0 0 0.3rem; }
.draftGateSub { font-family: var(--font-mono); font-size: 0.76rem; color: var(--text-muted); margin: 0 0 1.5rem; }
.draftGatePicks { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; }
@media (max-width: 520px) { .draftGatePicks { grid-template-columns: 1fr; } }
.draftGatePick {
    display: flex; flex-direction: column; gap: 0.4rem;
    padding: 1.1rem 1rem;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 3px;
    cursor: pointer;
    text-align: left;
    transition: border-color 0.2s;
}
.draftGatePick:hover { border-color: var(--gold); }
.draftGatePick[disabled] { opacity: 0.5; cursor: default; }
.pickName  { font-family: var(--font-head); font-size: 1.2rem; color: var(--gold); }
.pickBlurb { font-family: var(--font-mono); font-size: 0.72rem; color: var(--text-muted); line-height: 1.6; }

/* It sat beside the count in the heading and needed pushing off it. Under
   the five it is the first thing on its own line. */
.teamSubsPick { margin-left: 0; }

/* A team name somebody already has, while it is typed. */
.nameCheck { font-family: var(--font-mono); font-size: 0.68rem; color: var(--red-x); white-space: nowrap; }
.nameCheck:empty { display: none; }
.nameCheck.isCount { color: var(--text-muted); }
.teamNameIn.isTaken, .teamNameEdit.isTaken { border-color: var(--red-x); color: var(--red-x); }

/* ---- A roster member, as a banner ---------------------------------------
   Icon and Riot ID; the seat control at the right edge. Level, rank and
   mirth open under the name on hover, lined up like the banner at the top of
   the drawer. Your own row has none: that banner is yours. */
.teamRoster .rosterBanner {
    display: flex; align-items: center; gap: 0.6rem;
    padding: 0.4rem 0.55rem; margin: 0 0 5px;
    border: 1px solid var(--border); border-radius: 9px;
    background: var(--bg-card);
    transition: border-color 0.15s;
}
.teamRoster .rosterBanner:hover { border-color: var(--gold-dim); }
.rbIcon { flex: none; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--border); object-fit: cover; }
.rbIcon.isBlank { display: grid; place-items: center; background: var(--bg); color: var(--gold); font-family: var(--font-head); font-size: 0.95rem; }
.rbText { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; font-family: var(--font-mono); }
/* The name scrolls sideways when it runs long, with a white "…" at the
   edge saying so; hovering the banner opens it out in full. */
.rbId { color: var(--gold); font-size: 0.76rem; text-decoration: none; overflow-x: auto; scrollbar-width: none; white-space: nowrap; min-width: 0; }
.rbId::-webkit-scrollbar { display: none; }
a.rbId:hover { color: var(--gold-light); }
.rbName { display: flex; align-items: baseline; gap: 0.5rem; min-width: 0; }
.rbIdWrap { position: relative; display: flex; flex: 1 1 auto; min-width: 0; }
.rbIdWrap.isLong::after {
    content: '…'; position: absolute; right: 0; top: 0; padding-left: 12px;
    color: var(--text); font-size: 0.76rem; pointer-events: none;
    background: linear-gradient(90deg, transparent, var(--bg-card) 50%);
}
.rbName .rbPts { flex: none; margin-left: auto; color: var(--gold); font-size: 0.66rem; }
/* Mirth against the banner's edge on every row, x or no x. */
.rbName { padding-right: 0; }
/* The … stays on hover; the whole name lifts into a bubble over the row (draft.js). */
.rbWhere { flex: none; color: var(--gold); font-size: 0.62rem; margin-left: 0.3rem; }
.rbMore {
    display: flex; flex-direction: row; gap: 0 10px;
    max-height: 0; overflow: hidden; opacity: 0;
    color: var(--text-muted); font-size: 0.66rem; line-height: 1.35;
    transition: max-height 0.18s ease, opacity 0.18s ease, margin 0.18s ease;
}
.rbMore > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rbMore .rbPts { color: var(--gold); }
.rosterBanner:hover .rbMore, .rosterBanner:focus-within .rbMore { max-height: 6em; opacity: 1; margin-top: 2px; }
/* The x sits on the banner's top right corner, half over the border. */
.rosterBanner { position: relative; }
/* Inside the banner, bottom right, and only while the banner is open:
   on the corner it sat over the border and against the banner above. */
.rbCtl { position: absolute; right: 8px; bottom: 7px; display: flex; opacity: 0; transition: opacity 0.15s; }
.rosterBanner:hover .rbCtl, .rosterBanner:focus-within .rbCtl { opacity: 1; }
/* Two lines closed: the name with mirth at its end, the lane and the seat. */
.rosterBanner .rbIcon { margin-top: 2px; }
.rbLine { display: flex; align-items: center; flex-wrap: nowrap; gap: 6px; margin-top: 2px; font-size: 0.66rem; color: var(--text-muted); }
.rbLine .rbPts { color: var(--gold); }
.rbLine .rosterSeat, .rbLine .rbLane { color: var(--gold-dim); }
.rbDot { color: var(--border); }
.rosterLanePick { width: auto; padding: 0.05rem 0.2rem; font-size: 0.66rem; }
.rosterLanePick:focus { outline: none; border-color: var(--gold-dim); }
/* Two starters on one lane: a mark beside each of their pickers. */
.rbClash { color: var(--red-x); font-size: 0.72rem; line-height: 1; cursor: help; }
/* An ask out: what they have, what they want. */
.rbAsk { color: var(--text-muted); font-size: 0.62rem; white-space: nowrap; }
/* The x: a small bubble on the corner. */
.rosterBanner .rosterDrop {
    width: 18px; height: 18px; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--bg-card); border: 1px solid var(--red-x); border-radius: 50%;
    color: var(--red-x); font-family: var(--font-mono); font-size: 0.8rem; line-height: 0; padding-bottom: 1px; cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}
.rosterBanner .rosterDrop:hover { border-color: var(--red-x); background: color-mix(in srgb, var(--red-x) 12%, transparent); }
.teamCoach { margin-bottom: 0.9rem; }
.teamCoachHead { margin-top: 0.5rem; margin-bottom: 0.3rem; }
.teamCoachHead + .teamRoster { margin-top: 0; }

/* A switch with its label: Join requests on the team, Free agent on you. */

/* The team inbox: who is asking, their note under it, the answers at the right. */
.sentRow.reqRow { grid-template-columns: minmax(0, 1fr) auto; row-gap: 2px; }
.reqRow .sentWho  { grid-column: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reqRow .sentTeam { grid-column: 1; grid-row: 2; font-size: 0.68rem; overflow-wrap: anywhere; }
.reqRow .reqActs  { grid-column: 2; grid-row: 1 / span 2; }
.reqActs { display: flex; gap: 5px; margin-left: auto; }
.reqActs button { padding: 0.2rem 0.55rem; font-family: var(--font-mono); font-size: 0.66rem; border-radius: 4px; cursor: pointer; }
.sentWho a { color: var(--gold); text-decoration: none; }
.sentWho a:hover { color: var(--gold-light); }

/* Ask a team to take you, in its row of the Teams list. */
.reqSend {
    flex: none; margin-left: 0.4rem;
    padding: 0.18rem 0.6rem;
    background: none; border: 1px solid var(--gold-dim); border-radius: 4px;
    color: var(--gold); font-family: var(--font-mono); font-size: 0.66rem; cursor: pointer;
}
.reqSend:hover { background: color-mix(in srgb, var(--gold) 12%, transparent); }
.reqSend.isSent { border-color: var(--border); color: var(--text-muted); }
/* The two lines stay put on hover; the line under is level, rank, region. */
.rbMore { flex-wrap: nowrap; }

/* ---- Points ------------------------------------------------------------ */
.agentPts { width: 6ch; flex: none; 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 { width: 10ch; flex: none; }
/* 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,0.45);
    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 rgba(0,0,0,0.55), 0 0 0 0 color-mix(in srgb, var(--notify) 0%, transparent); }
    50%      { box-shadow: 0 2px 14px rgba(0,0,0,0.55), 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. */
@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; }
    body:has(.draftDrawer.isOpen) .lafterInbox,
    body:has(.draftDrawer.isOpen) .lafterHelp,
    body:has(.draftDrawer.isOpen) #lafter-admin-toolbar { 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   { display: none; }
    .agentRank  { grid-area: rank; width: auto; }
    .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; }
    .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; }
}