/* ---- 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; }
.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/pool.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; max-height: 15.5rem; overflow-y: auto; overscroll-behavior: contain; padding: 2px; scrollbar-width: thin; }
.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; }
/* Lighter or darker, of the hue on the line above. */
.iconPickLight {
    -webkit-appearance: none; appearance: none; width: 100%; height: 8px; margin: -4px 0 0; border-radius: 999px; cursor: pointer;
    background: linear-gradient(90deg, hsl(var(--h, 45) 72% 15%), hsl(var(--h, 45) 72% 50%), hsl(var(--h, 45) 72% 85%));
}
.iconPickLight::-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; }
.iconPickLight::-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);
}
.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;
}
/* The slack of a wide row is shared, weighted, not handed to Lanes alone:
   the name and the lanes take the most, the rank some, the rest a little,
   and each has a ceiling so a column of two-letter regions never becomes a
   field. Nothing but Lanes gives when the row is tight. The head carries the
   same classes, so its titles share out the same way. */
.agentRiot {
    flex: 3 0 22ch; max-width: 34ch;
    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; }
/* Level and Rank are one column, Rank by default; the head's slider picks.
   Player and Alias the same, Player by default. The other is in the row,
   hidden, so a switch is a class on the list and nothing is fetched. */
/* Room before the rank: Mirth is right-aligned, so the gap alone put the
   number against the rank's first letter. On the rank's side, where it is
   a span in the head as well as the row -- a margin on Mirth was cancelled
   in the head, whose cells are buttons with margins of their own. */
.agentLvl   { flex: 2 0 14ch; max-width: 20ch; margin-left: 1.4rem; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agentRank  { flex: 2 0 14ch; max-width: 20ch; margin-left: 1.4rem; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* A cell is its flex size, never its content's: the head's pills are wider
   than a column's minimum, and without this they widened the head's cells
   and every column after drifted off the rows'. */
.agentRiot, .agentAlias, .agentRank, .agentLvl { min-width: 0; }
.poolList:not(.viewLvl) .agentCard .agentLvl, .poolList.viewLvl .agentCard .agentRank { display: none; }
.poolList:not(.viewAlias) .agentCard .agentAlias, .poolList.viewAlias .agentCard .agentRiot { display: none; }
/* The alias: the name in the cell, and a click copies it. */
.agentAlias {
    flex: 3 0 22ch; max-width: 34ch; padding: 0; margin: 0; text-align: left;
    background: none; border: none; font: inherit; color: var(--text); cursor: copy;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.agentAlias:hover { color: var(--gold); }
.agentAlias.isCopied { color: var(--gold); }
.agentAlias.isCopied::after { content: ' \00b7 copied'; color: var(--gold-dim); }
.agentAlias.agentNoId { cursor: default; }
/* A captain's alias, in the Captain column when the head says Alias. */
.poolList:not(.viewAlias) .rivalCard .rivalCapAlias, .poolList.viewAlias .rivalCard .rivalCap { display: none; }
.rivalCapAlias {
    flex: 1; min-width: 0; padding: 0; margin: 0; text-align: left;
    background: none; border: none; font: inherit; color: var(--text); cursor: copy;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rivalCapAlias:hover, .rivalCapAlias.isCopied { color: var(--gold); }
.rivalCapAlias.isCopied::after { content: ' \00b7 copied'; color: var(--gold-dim); }
.rivalCapAlias.agentNoId { cursor: default; }
.agentWhere { flex: 1 0 7.5ch; max-width: 11ch; color: var(--gold); 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, .poolHead button.agentRole { flex: 1 0 8ch; max-width: 11ch; margin-left: 1rem; 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; }

/* 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.55rem 0.55rem 0.45rem;
    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; }
/* The sort: a chevron centred under the title, pointing the way the list
   runs. A grid one column wide -- the title's own width -- so the chevron is
   under the word, not the cell, whichever edge the title sits on; its row
   takes no height, so the heads beside it stay put. */
/* overflow visible: the cells clip to their width for the rows' sake, and a
   clipped cell would swallow a chevron drawn outside its box. */
.poolHead button[data-dir] { color: var(--gold); overflow: visible; }
/* The word is wrapped (draft/pool.js) so the chevron has the word, not the cell,
   to centre on; out of the flow, so the word never moves. Up: above it.
   Down: under it. The half letter-space the last letter trails is taken off. */
.poolWord { position: relative; display: inline-block; }
.poolHead button[data-dir] .poolWord::after {
    content: ''; position: absolute; left: calc(50% - 0.03em); width: 5px; height: 5px;
    border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
}
.poolHead button[data-dir="1"] .poolWord::after { top: -5px; transform: translateX(-50%) rotate(-135deg); }
.poolHead button[data-dir="-1"] .poolWord::after { bottom: -5px; transform: translateX(-50%) rotate(45deg); }
/* 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); }
/* A column that is two: "Player / Alias" in the head, the lit word the
   column. A click on it sorts, as any title does; a click on the other
   switches the column, and drops the sort. Plain words, no chrome,
   so the first starts where the values below it do. */
.poolHeadSwitch {
    display: inline-flex; align-items: baseline; gap: 0.35em;
    overflow: visible; text-overflow: clip; white-space: nowrap;
}
.poolSlash { color: var(--text-muted); opacity: 0.6; }
/* The same switch on the drawer's Team heading, at the other end of the line. */
.teamHeadRow { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.teamHeadRow h2 { margin: 0; }
.rbSwitch { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.06em; text-transform: uppercase; }
.rbSwitch button { padding: 0; background: none; border: 0; font: inherit; letter-spacing: inherit; text-transform: inherit; color: var(--text-muted); opacity: 0.7; cursor: pointer; }
.rbSwitch button:hover { opacity: 1; color: var(--text); }
.rbSwitch button.on { color: var(--gold); opacity: 1; }
.rbAlias { padding: 0; background: none; border: 0; font: inherit; color: inherit; cursor: pointer; }
.rbAlias:hover, .rbAlias.isCopied { color: var(--gold); }
.rbAlias.isNone { color: var(--text-muted); }
.teamRoster:not(.viewAlias) .rbAlias, .teamRoster.viewAlias .rbId { display: none; }
.poolHead .poolHeadSwitch button.on { color: var(--gold); }
.poolHead .poolHeadSwitch button:not(.on) { color: var(--text-muted); opacity: 0.7; }
.poolHead .poolHeadSwitch button:not(.on):hover { opacity: 1; color: var(--text); }

/* 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); }
a.rivalName[data-team-icon] { color: var(--team, var(--text)); }
/* 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); }