/* ---- 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 var(--tabShadow);
    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%); }
.draftDrawerLeft.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 var(--tabShadow);
    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;
}
/* Profile and Team, stacked on the same edge: the pair rides the drawer the
   way one tab does. The one not showing stays a tab you can see is there, in
   the plain border, so it reads as the other page and not as the open one. */
.drawerTabs {
    position: absolute;
    left: calc(100% + 1px); top: 50%;
    transform: translateY(-50%);
    display: flex; flex-direction: column; gap: 6px;
}
.drawerTabs .drawerTab { position: relative; left: auto; top: auto; transform: none; }
.drawerTab.isTeamTab svg { width: 25px; }
.draftDrawer .drawerBody[hidden] { display: none; }
.draftDrawer.isOpen .drawerTabs .drawerTab:not(.isActive) { color: var(--text-muted); border-color: var(--border); }
.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; }
/* A rule between the drawer's parts: Team, Draft, Preferences. */
.drawerBody > .draftH2Row:not(:first-child) { border-top: 1px solid var(--border); padding-top: 1.1rem; }
/* 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: 22px; height: 22px; padding: 0; align-self: center;
    background: color-mix(in srgb, var(--gold) 10%, transparent); border: 1px solid var(--gold-dim); border-radius: 4px;
    color: var(--gold); font-size: 0.85rem; line-height: 1; cursor: pointer;
}
.draftPullSet:hover { color: var(--gold-light); border-color: var(--gold); }
.inboxNew {
    font-family: var(--font-mono); font-size: 0.66rem; color: var(--gold);
    vertical-align: middle;
}

/* ---- 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; }