/* THE LINEUP'S STYLES, SHARED between league.html and lineup-preview.html — one file,
   two consumers, so a preview cannot drift from the page it previews.

   ROWS, NOT SHIRTS. Full width across the screen: club colour as a left edge, position,
   name and club on one line, projection right-aligned, marker before it. At 390px that
   leaves ~250px for name and club, where the pitch gave a 57px shirt and truncated
   "Williams-Barnett" to "Williams-Bar…". 48px rows clear a 44px tap target. */
.lu-wrap { margin: 0 0 34px; }
.lu-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.lu-lead { font-family: var(--display); font-size: 18px; font-weight: 600; }
.lu-facts { font-family: var(--mono); font-size: 11px; color: var(--ink-faint); }

.lu-group { margin-bottom: 6px; }
.lu-ghead { font-family: var(--mono); font-size: 9.5px; letter-spacing: .16em;
            text-transform: uppercase; color: var(--ink-faint);
            padding: 10px 0 4px; }

.lu-row { position: relative; display: flex; align-items: center; gap: 10px;
          min-height: 48px; padding: 0 4px 0 14px;
          border-bottom: 1px solid var(--line); }
.lu-edge { position: absolute; left: 0; top: 8px; bottom: 8px; width: 4px; border-radius: 2px; }
.lu-pos { font-family: var(--mono); font-size: 9.5px; letter-spacing: .08em;
          color: var(--ink-faint); width: 26px; flex: 0 0 26px; }
.lu-name { flex: 1 1 auto; min-width: 0; font-size: 15px; white-space: nowrap;
           overflow: hidden; text-overflow: ellipsis; }
.lu-club { font-family: var(--mono); font-size: 11px; color: var(--ink-faint); margin-left: 8px; }
.lu-ep { font-family: var(--mono); font-size: 14px; font-weight: 700; width: 42px;
         flex: 0 0 42px; text-align: right; }
.lu-dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 9px; }
.lu-dot.out, .lu-dot.gone { background: var(--neg); }
.lu-dot.doubt { background: #d69628; }

/* THE BENCH IS THE SAME GRID, ONE STEP DOWN — and it keeps its markers, because
   "the injured one is already benched" is exactly what the pitch could not say. */
.lu-bench .lu-name { color: var(--ink-2); }
.lu-bench .lu-ep { font-weight: 500; color: var(--ink-2); }
.lu-bench .lu-edge { opacity: .5; }

/* THE DIVIDER CARRIES THE CLAIM. A starter/bench line reads as "your lineup" whatever a
   footnote says, so the sentence that says whose eleven this is sits here, in the break
   itself, where it cannot be scrolled past. */
.lu-divider-top { margin: 4px 0 2px; }
/* A LONG TEAM NAME WRAPS RATHER THAN OVERFLOWS. FPL caps entry names, but the heading is a
   sentence built around one and the page is 390px wide. min-width:0 because a flex item
   will not shrink below its content otherwise, and overflow-wrap:anywhere because a name
   with no spaces in it is one unbreakable token — measured at 60 characters it pushed the
   heading to 766px on a 390px screen, which is a horizontally scrolling page. */
.lu-lead { line-height: 1.25; min-width: 0; overflow-wrap: anywhere; }
.lu-divider { display: flex; align-items: center; gap: 12px; margin: 18px 0 2px; }
.lu-divider::before, .lu-divider::after { content: ""; height: 1px; background: var(--line-2); flex: 1; }
.lu-divider span { font-family: var(--mono); font-size: 10px; letter-spacing: .12em;
                   text-transform: uppercase; color: var(--ink-faint); }

/* A TIE IS SHOWN, NOT BROKEN. Same published-precision rule as the swap cards: two
   players quoted the same ep_next are the same claim, and choosing between them would be
   inventing information the source does not carry. */
.lu-tie { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline;
          padding: 8px 0 8px 14px; border-bottom: 1px solid var(--line);
          background: rgba(214,150,40,.05); }
.lu-tie-lead { font-family: var(--mono); font-size: 10px; letter-spacing: .1em;
               text-transform: uppercase; color: #a8730f; }
.lu-tie-players { font-size: 13px; color: var(--ink-2); }
.lu-tie-last { background: rgba(11,168,79,.05); }
.lu-tie-last .lu-tie-lead { color: var(--pitch-ink); }