/* ---- 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; }
.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; white-space: normal; overflow: visible; text-overflow: clip; }
.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; }