/* Desktop league workspace rail (Discord-style). Always on ≥651px; hidden on mobile.
 * Vertical rhythm shared with .rail / .topbar via --rail-* tokens in shell.css. */
.league-rail{
  position:fixed;z-index:21;left:0;top:0;bottom:0;width:var(--rail-league-w);
  display:none;flex-direction:column;align-items:center;
  padding:0 0 var(--rail-pad-y);gap:0;
  background:#070f1c;border-right:1px solid #182438;color:#9cabc3;
}
.league-rail .brand-mark{
  flex:0 0 auto;width:100%;height:var(--rail-chrome-h);margin:0;
  display:grid;place-items:center;color:#fff;
}
.league-rail .brand-logo{display:block;height:28px;width:auto}
.league-rail-list{
  display:flex;flex-direction:column;align-items:center;gap:var(--rail-gap);
  flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;
  width:100%;padding:var(--rail-pad-y) 0;scrollbar-width:none;
}
.league-rail-list::-webkit-scrollbar{display:none}
.league-rail-item{
  position:relative;flex:0 0 auto;width:var(--rail-tile);height:var(--rail-tile);padding:0;
  display:grid;place-items:center;border-radius:0;overflow:visible;
  background:transparent;
}
.league-rail-item::before{
  /* Lives in the gutter left of the tile — must stay inside the rail. */
  content:'';position:absolute;left:-6px;top:50%;width:4px;height:0;z-index:2;
  transform:translateY(-50%);border-radius:0 4px 4px 0;background:#fff;
  pointer-events:none;transition:height .15s ease;
}
.league-rail-item:hover::before{height:16px}
.league-rail-item.active::before{height:32px}
.league-rail-tile{
  width:var(--rail-tile);height:var(--rail-tile);border-radius:50%;display:block;
  pointer-events:none;user-select:none;
  transition:border-radius .18s var(--ease,ease);
}
.league-rail-item:hover .league-rail-tile{border-radius:14px}
.league-rail-item.active .league-rail-tile{border-radius:12px}
.league-rail-add{
  flex:0 0 auto;width:var(--rail-tile);height:var(--rail-tile);margin-top:0;
  display:grid;place-items:center;border-radius:50%;
  background:#112033;color:#7dcf9a;border:1px dashed #2a4a3a;
  transition:border-radius .18s var(--ease,ease),background .18s,color .18s;
}
.league-rail-add:hover{background:#163528;color:#b6f0c8;border-radius:14px;border-style:solid}
.league-rail-add:active{border-radius:12px}
.league-rail-add i{font-size:18px}
.league-rail-setup{
  flex:0 0 auto;width:var(--rail-tile);height:var(--rail-tile);margin-top:auto;
  display:grid;place-items:center;border-radius:50%;
  background:#112033;color:#8fa0bb;
  transition:border-radius .18s var(--ease,ease),background .18s,color .18s;
}
.league-rail-setup:hover{background:#1a2c48;color:#e8eef8;border-radius:14px}
.league-rail-setup:active{border-radius:12px}
.league-rail-setup i{font-size:20px}

.league-choice-tile{width:36px;height:36px;border-radius:50%;flex:0 0 auto;background:#15233a;overflow:hidden}
.league-choice-row{display:flex;align-items:stretch;gap:6px;margin:0 0 8px}
.league-choice-row .league-choice{flex:1 1 auto;min-width:0;margin:0}
.league-choice-remove{
  flex:0 0 auto;width:42px;align-self:stretch;display:grid;place-items:center;
  border-radius:8px;border:1px solid var(--line,#dfe5ee);background:#fff;color:#8a3d4a;
}
.league-choice-remove:hover:not(:disabled){background:#fff1f3;border-color:#e8b4bc;color:#b42318}
.league-choice-remove:disabled{opacity:.35;cursor:not-allowed}
.league-choice-remove .ph{font-size:16px}
.league-icon-editor{display:grid;gap:12px}
.league-icon-editor-head{display:flex;align-items:center;gap:12px}
.league-icon-editor-head h3{margin:0;font-size:14px}
.league-icon-editor-head .subtle-note{margin:2px 0 0}
.league-icon-preview{width:48px;height:48px;border-radius:50%;flex:0 0 auto;background:#15233a;overflow:hidden}
.league-icon-tones{display:flex;flex-wrap:wrap;gap:8px}
.league-icon-tone{
  width:22px;height:22px;border-radius:50%;padding:0;
  background:var(--tone-from);
  box-shadow:inset 0 0 0 2px var(--tone-accent);
  transition:border-radius .18s ease;
}
.league-icon-tone:hover{border-radius:7px}
.league-icon-tone.active{outline:2px solid #cf193a;outline-offset:2px}
.league-icon-motifs{display:flex;flex-wrap:wrap;gap:8px}
.league-icon-motif{
  width:40px;height:40px;padding:2px;border-radius:12px;
  border:1px solid var(--line,#dfe5ee);background:#fff;
}
.league-icon-motif img{width:100%;height:100%;border-radius:10px}
.league-icon-motif.active{border-color:#cf193a;box-shadow:0 0 0 1px #cf193a}
.league-icon-editor .field{margin:0}
.league-icon-editor .secondary-button{justify-self:start}

@media(min-width:651px){
  body.has-league-rail .league-rail{display:flex}
  body.has-league-rail .rail{left:var(--rail-league-w)}
  body.has-league-rail .app-frame{margin-left:calc(var(--rail-league-w) + var(--rail-nav-w))}
  body.has-league-rail .league-picker{display:none!important}
}

@media(max-width:650px){
  .league-rail{display:none!important}
}