/* One place for the three numbers that decide the shape: the face, how
     much of it sits past the edge of the window (this is what "hanging
     over the edge" means, so it is a variable and not a magic number),
     and how far the card reaches back over the page. */
  .lbr{
    /* 2026-08-25, the founder: "push out a bit more too and increase sizes ...
       needs to LOOK like a leaderboard peeking out at the side." 54 -> 68
       so a tile carries a recognisable picture rather than a thumbnail,
       which is what the photo tier needs to be worth having. */
    --lbr-ava:78px;
    /* Peek is how far the rail sits PAST the right edge, so a negative
       value pulls it back onto the page: 22 -> 12 -> -8. Every tile is now
       whole, with a margin of page outside it, which is the difference
       between a clipped column and a board that peeks. The first screen
       gives back the room it takes (html.lbr-ready .fscreen-wrap), so
       nothing else moves. */
    --lbr-peek:-8px;
    --lbr-card:212px;
    /* Discs collapsed AND open. 2026-08-24 the founder asked for the
       tiles to square off on open ("make less circular and more square
       when it expands out"); 2026-09-01, off a screenshot of the open
       rail, he reversed it ("make it circular in this respect"). Both
       radii stay variables so the two shapes remain one decision. */
    --lbr-r:50%;
    --lbr-r-open:50%;
    /* 2026-09-01: docked on the LEFT edge (founder: "bring the
       leaderboard over to the left side"). Every horizontal rule below
       is the mirror of the right-edge version it replaced; --lbr-peek
       keeps its meaning (how far past the edge the rail sits), so the
       translate negates it. */
    position:fixed;left:0;top:calc(50% + 12px);z-index:45;
    transform:translate(calc(var(--lbr-peek) * -1),-50%);
    display:flex;flex-direction:column;align-items:flex-start;gap:11px;
    /* Right padding is hit area, not spacing: collapsed, ~42px of each
       face is on screen, and the approach makes the rail easy to reach
       without a precise mouse. */
    padding:10px 16px 10px 0;
    opacity:0;pointer-events:none;
    transition:transform .34s cubic-bezier(.22,.9,.3,1),opacity .28s ease,
               gap .3s cubic-bezier(.22,.9,.3,1),padding-left .3s cubic-bezier(.22,.9,.3,1);
  }
  /* Opening gives the column more air as well as more width, so the rows
     read as a board rather than a stack of touching tiles. */
  .lbr:hover,.lbr:focus-within{gap:14px;padding-left:12px}
  .lbr:hover .lbr-list,.lbr:focus-within .lbr-list{gap:14px}
  /* Set by the rail's own script once real rows have painted, and only
     while the first screen is in view. */
  body.lbr-on .lbr{opacity:1;pointer-events:auto}
  .lbr:hover,.lbr:focus-within{transform:translate(0,-50%)}
  @media(max-width:1100px){.lbr{display:none}}
  /* A class rule out-specifies the UA [hidden] rule, so the two elements
     that start hidden (the rail itself, and the "see all" foot until a
     total arrives) need this or they occupy the edge invisibly and still
     reach the accessibility tree. */
  .lbr[hidden],.lbr-item[hidden]{display:none}

  .lbr-list{display:flex;flex-direction:column;align-items:flex-start;gap:14px;transition:gap .3s cubic-bezier(.22,.9,.3,1)}
  /* isolation: the rank pip carries its own z-index, and without a stacking
     context per row it escaped and painted over the NEXT face, at rest and
     magnified (the founder, 2026-09-03, twice: "dont make this mistake").
     Isolated, a pip can only ever stack inside its own row. */
  .lbr-item{position:relative;display:flex;justify-content:flex-start;text-decoration:none;color:inherit;isolation:isolate;z-index:1}
  /* .lbr-pic is the thing that MAGNIFIES, and it is a separate element
     from the circle for two reasons: the circle clips its own content
     (that is what makes it round), so a rank pip inside it loses its
     outboard corner; and the avatar engine repaints the circle's
     innerHTML wholesale when a debater has a built avatar, which would
     take the pip with it. transform-origin pins the LEFT edge, so
     magnifying grows the face rightwards into the page instead of pushing
     it further off the screen. */
  .lbr-pic{
    position:relative;width:var(--lbr-ava);height:var(--lbr-ava);flex:none;
    transform-origin:0 50%;
    transition:transform .24s cubic-bezier(.22,.9,.3,1);
    /* 2026-09-03, the founder, on the idle breathing shipped an hour
       earlier: "dont have them moving". The faces hold still; the
       magnify on approach is the only motion. */
  }
  .lbr-ava{
    position:absolute;inset:0;
    border-radius:var(--lbr-r);overflow:hidden;background:#221b1e;
    border:2px solid rgba(255,255,255,.18);
    box-shadow:0 10px 26px rgba(0,0,0,.38);
    display:flex;align-items:center;justify-content:center;
    font-family:var(--font-display,inherit);font-weight:800;font-size:.86rem;letter-spacing:.02em;color:#fff;
    transition:border-color .2s ease,box-shadow .2s ease,border-radius .3s cubic-bezier(.22,.9,.3,1);
  }
  .lbr:hover .lbr-ava,.lbr:focus-within .lbr-ava{border-radius:var(--lbr-r-open)}
  [data-theme="light"] .lbr-ava{border-color:rgba(29,25,21,.14);background:#f2ece2;color:#1a1a1f}
  .lbr-ava img,.lbr-ava svg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
  /* Their real photo paints OVER the emblem behind it, so removing a dead
     <img> in onerror reveals the emblem rather than leaving a hole. */
  .lbr-ava img{z-index:1}
  /* The stand-in is an <img> too since the photo tier landed, so it needs
     to be pinned back under that rule by name. Without this the stand-in
     wins on document order and covers the account photo it is standing in
     for, which is the tier order exactly backwards. */
  .lbr-ava .db-pfp{z-index:0}
  /* Dock falloff: the pointed-at face grows most, its neighbours less.
     :has drives the "one above" half; a browser without it simply
     magnifies the hovered face alone, which still reads correctly. */
  /* 2026-09-03, the founder: "make the leaderboard standout and have the
     circular motion effect more intensely". Bigger faces, a harder
     magnify on approach, and a slow idle breathing so the column reads as
     alive before anyone reaches for it. */
  .lbr-item:hover .lbr-pic,.lbr-item:focus-visible .lbr-pic{transform:scale(1.55)}
  /* The magnified face sits IN FRONT of its neighbours (the founder, off a
     screenshot of a rank pip drawn over the hovered face: "make sure the
     front selected one hovers actually in front so it has depth"). */
  .lbr-item:hover,.lbr-item:focus-within{z-index:10}
  .lbr-item:hover .lbr-ava,.lbr-item:focus-visible .lbr-ava{box-shadow:0 22px 48px rgba(0,0,0,.55),0 0 0 3px rgba(255,255,255,.9)}
  .lbr-item:hover .lbr-ava,.lbr-item:focus-visible .lbr-ava{border-color:rgba(239,68,68,.8);box-shadow:0 14px 34px rgba(0,0,0,.46)}
  .lbr-item:hover + .lbr-item .lbr-pic,.lbr-item:has(+ .lbr-item:hover) .lbr-pic{transform:scale(1.24)}
  .lbr-list .lbr-item:first-child .lbr-ava{border-color:rgba(239,68,68,.55)}
  .lbr-item:focus-visible{outline:none}
  .lbr-item:focus-visible .lbr-ava{outline:2px solid #ef4444;outline-offset:3px}

  /* Rank pip. Outboard corner of the circle, and a sibling of it rather
     than a child (see .lbr-pic above). */
  .lbr-rk{
    position:absolute;right:-5px;bottom:-2px;z-index:2;
    /* Grew with the tile (2026-08-25). A 19px pip on a 68px face reads as
       a speck rather than as a rank. */
    min-width:24px;height:24px;padding:0 6px;border-radius:12px;
    display:flex;align-items:center;justify-content:center;
    background:#0f0c0d;color:#fff;border:1.5px solid rgba(255,255,255,.24);
    font-family:var(--font-mono,ui-monospace,monospace);font-size:.68rem;font-weight:700;font-variant-numeric:tabular-nums;line-height:1
  }
  .lbr-list .lbr-item:first-child .lbr-rk{background:#dc2626;border-color:rgba(255,255,255,.36)}
  [data-theme="light"] .lbr-rk{background:#1a1a1f;border-color:rgba(255,255,255,.6)}

  /* The head and exit tiles are light glass, not black punctuation on an
     otherwise airy first screen. The trophy is a project-owned transparent
     cutout, so the surface can show through its negative space. */
  .lbr-ava--more{
    background:linear-gradient(145deg,rgba(255,255,255,.82),rgba(255,250,244,.56));
    color:#1a1a1f;font-size:1.05rem;
    border-color:rgba(255,255,255,.82);
    box-shadow:0 12px 30px rgba(35,25,28,.15),inset 0 1px 0 rgba(255,255,255,.95);
    -webkit-backdrop-filter:blur(16px) saturate(1.08);backdrop-filter:blur(16px) saturate(1.08)
  }
  [data-theme="light"] .lbr-ava--more{
    background:linear-gradient(145deg,rgba(255,255,255,.82),rgba(255,250,244,.56));
    color:#1a1a1f;border-color:rgba(255,255,255,.82)
  }

  /* The card is absolutely positioned, so opening the rail animates two
     properties and moves no layout. It reaches back over the page on
     purpose: it is a hover popover, the same way a dock label is. */
  /* Warm white glass lets the rail blend into the first screen instead of
     laying a black column over it. Blur supplies separation from whatever
     happens to sit behind the fixed rail; the opacity stays low enough for
     the page texture to remain visible. */
  /* 2026-08-24, the founder: "make it smaller text no block on it just the text
     overlaying". No card, no glass, no border: the label sits straight on
     the page beside its tile. The only paint left is a halo the colour of
     the page, which is invisible on a flat background and is what keeps
     the label readable in the one place it is not flat, over the example
     round's video tiles. */
  .lbr-card{
    position:absolute;top:50%;left:calc(var(--lbr-ava) * 1.28 + 12px);
    width:var(--lbr-card);
    display:flex;flex-direction:column;gap:1px;align-items:flex-start;text-align:left;
    color:#1a1a1f;
    text-shadow:0 1px 2px rgba(255,255,255,.9),0 0 12px rgba(255,255,255,.85),0 0 22px rgba(255,255,255,.6);
    opacity:0;pointer-events:none;
    transform:translate(-14px,-50%);transform-origin:0 50%;
    transition:opacity .18s ease,transform .3s cubic-bezier(.22,.9,.3,1),color .18s ease;
  }
  :root:not([data-theme="light"]) .lbr-card{
    color:#f6f2ec;
    text-shadow:0 1px 2px rgba(10,8,9,.95),0 0 12px rgba(10,8,9,.9),0 0 22px rgba(10,8,9,.7);
  }
  /* Cascade: the rows arrive one after another rather than all at once,
     which is what the dock does and is most of why it feels alive. --i is
     stamped per row by the renderer. Leaving on close is instant, because
     a staggered exit reads as lag. */
  .lbr:hover .lbr-card,.lbr:focus-within .lbr-card{
    opacity:1;transform:translate(0,-50%);
    transition-delay:calc(var(--i,0) * 26ms);
  }
  /* With the card gone, hover has to read on the type itself. */
  .lbr-item:hover .lbr-card{color:#c02626}
  :root:not([data-theme="light"]) .lbr-item:hover .lbr-card{color:#ff8f8f}

  .lbr-nm{font-family:var(--font-display,inherit);font-weight:800;font-size:.8rem;line-height:1.2;
    letter-spacing:-.008em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
  /* Score and format on one line, the number in the mono face every other
     live figure on this page uses so it lines up digit for digit. The
     score bar went with the card: a floating 3px rule with nothing under
     it reads as a stray line rather than a measure. */
  .lbr-meta{display:flex;align-items:baseline;justify-content:flex-start;gap:6px;min-width:0}
  .lbr-sc{font-family:var(--font-mono,ui-monospace,monospace);font-variant-numeric:tabular-nums;
    font-weight:700;font-size:.72rem;flex:none}
  .lbr-fmt{font-size:.54rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
    opacity:.62;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
  .lbr-sub{font-size:.62rem;line-height:1.3;opacity:.6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
  .lbr-more .lbr-nm{font-size:.74rem}

  /* The disclosure the face bank requires (see the note at BANK in the
     renderer). Visible only while the rail is open, which is also the
     only state where the portraits are attached to a readable name. */
  .lbr-foot{
    position:absolute;top:100%;left:12px;margin:12px 0 0;
    width:var(--lbr-card);text-align:left;
    font-size:.66rem;line-height:1.3;color:var(--text-dim,rgba(255,255,255,.5));
    opacity:0;transition:opacity .2s ease;pointer-events:none;
  }
  [data-theme="light"] .lbr-foot{color:rgba(26,26,31,.5)}
  .lbr:hover .lbr-foot,.lbr:focus-within .lbr-foot{opacity:1}

  /* Name + score stay in the accessibility tree at every state; the card
     is a visual affordance, not the only copy. */
  .lbr-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

  @media(prefers-reduced-motion:reduce){
    .lbr,.lbr-card,.lbr-pic,.lbr-ava{transition:none}
    .lbr-item:hover .lbr-pic,.lbr-item:focus-visible .lbr-pic,
    .lbr-item:hover + .lbr-item .lbr-pic,.lbr-item:has(+ .lbr-item:hover) .lbr-pic{transform:none}
  }