/* =========================================================================
   LADDER SCREEN — js/screen-ladder.js owns the markup, this owns the look.

   Everything is scoped under .ladder. It adds no colours, no radii and no
   shadows: panels, tags, buttons, facts, notices and the empty state all come
   from styles.css. What is new here is the standings grid — five columns that
   fold into two lines on a phone — and the pinned own-row at the bottom.
   ========================================================================= */

/* No padding at the bottom of the scroller: the pinned bar sticks to the
   padding edge, and any gap there would show a strip of list sliding along
   underneath it. The breathing room at the end of the scroll lives on the
   inner column instead. */
.ladder{
  flex:1;min-height:0;overflow-y:auto;
  padding:var(--s5) var(--s4) 0;
}
.ladder-inner{
  width:100%;max-width:720px;margin:0 auto;padding-bottom:var(--s4);
  display:flex;flex-direction:column;gap:var(--s4);
}

/* ---- page head ---------------------------------------------------------- */
.ladder .lad-head{display:flex;flex-direction:column;gap:var(--s1)}
.ladder .lad-head h1{
  font-family:var(--font-display);font-size:var(--t-xl);font-weight:700;letter-spacing:-.02em;
}
.ladder .lad-head p{
  color:var(--ink-2);font-size:var(--t-sm);text-wrap:pretty;max-width:62ch;
}

/* ---- prose blocks ------------------------------------------------------- */
/* Sections inside a panel are separated by a hairline, never by a second box. */
.ladder .lad-self-panel-body{display:flex;flex-direction:column;gap:var(--s3)}
.ladder .lad-self-panel-body > .lad-slot + .lad-note,
.ladder .lad-note + .lad-note{
  border-top:1px solid var(--line-soft);padding-top:var(--s3);
}
.ladder .lad-note{display:flex;flex-direction:column;gap:var(--s2)}
.ladder .lad-lead{font-size:var(--t-sm);font-weight:600}
.ladder .lad-p{font-size:var(--t-sm);color:var(--ink-2);line-height:1.45;text-wrap:pretty}

.ladder .lad-facts{display:flex;flex-direction:column;gap:6px}
.ladder .lad-facts li{
  position:relative;padding-left:var(--s3);
  font-size:var(--t-sm);color:var(--ink-2);line-height:1.45;text-wrap:pretty;
}
.ladder .lad-facts li::before{
  content:"";position:absolute;left:2px;top:.6em;
  width:4px;height:4px;border-radius:50%;background:var(--ink-3);
}

/* your own name line, above the facts strip */
.ladder .lad-me{margin-bottom:2px}
.ladder .lad-me > b{font-size:var(--t-md)}

/* ---- the standings grid ------------------------------------------------- */
.ladder .lad-cols,
.ladder .lad-row{
  display:grid;
  grid-template-columns:34px minmax(0,1fr) 66px 58px 58px;
  grid-template-areas:"r n g w p";
  align-items:center;
  gap:var(--s2);
  padding:var(--s2) var(--s3);
  border-left:3px solid transparent;
  padding-left:calc(var(--s3) - 3px);
}
.ladder .lad-cols{
  border-bottom:1px solid var(--line-soft);
  font-size:var(--t-xs);font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-3);
}
.ladder .lad-list li + li{border-top:1px solid var(--line-soft)}
.ladder .lad-list li{transition:background var(--dur) var(--ease)}
.ladder .lad-list li:hover{background:var(--surface-2)}

.ladder .lad-rank{
  grid-area:r;text-align:right;
  font-size:var(--t-sm);color:var(--ink-3);
}
/* Rank 1–3 are marked by the numeral going gold, and by nothing else. */
.ladder .lad-row.is-top .lad-rank{color:var(--gold);font-weight:700}

.ladder .lad-name{grid-area:n;display:flex;align-items:center;gap:var(--s2);min-width:0}
.ladder .lad-name > b{
  font-size:var(--t-sm);font-weight:600;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.ladder .lad-handle{
  flex:0 1 auto;color:var(--ink-3);font-size:var(--t-xs);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.ladder .lad-name .tag{flex:none}

.ladder .lad-cell{display:flex;flex-direction:column;align-items:flex-end;line-height:1.2;min-width:0}
.ladder .lad-rating{grid-area:g}
.ladder .lad-wl{grid-area:w}
.ladder .lad-played{grid-area:p}
.ladder .lad-cell .num{font-size:var(--t-sm);color:var(--ink-2)}
.ladder .lad-rating .num{font-size:var(--t-md);font-weight:700;color:var(--ink)}
/* the column strip carries these labels on wide screens — a screen reader
   still hears them on every row */
.ladder .lad-row .lad-rank small,
.ladder .lad-row .lad-cell small{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;
}

/* you, wherever you appear */
.ladder .lad-row.is-self{border-left-color:var(--info)}

/* ---- pinned own row ----------------------------------------------------- */
/* Sticky to the bottom of the scroller so it is on screen at rank 400 too.
   It is opaque and bordered rather than shadowed: nothing here floats. The
   label is what stops it reading as one more line of the table behind it. */
.ladder .lad-pin{
  position:sticky;bottom:0;z-index:var(--z-sticky);
  background:var(--surface);
}
.ladder .lad-pin-head{padding:6px var(--s3) 0;border-bottom:1px solid var(--line-soft);padding-bottom:5px}
.ladder .lad-pin .lad-row{padding-top:var(--s2);padding-bottom:var(--s2)}
.ladder .lad-pin-invite{
  display:flex;align-items:center;gap:var(--s3);
  padding:var(--s2) var(--s3);
}
.ladder .lad-pin-copy{flex:1;min-width:0;font-size:var(--t-sm);color:var(--ink-2);text-wrap:pretty}

/* ---- error -------------------------------------------------------------- */
.ladder .lad-error{display:flex;flex-direction:column;gap:var(--s3)}

/* ---- loading ------------------------------------------------------------ */
/* Flat placeholder bars: the shape of the table, no invented numbers in it,
   and no ambient animation. */
.ladder .lad-loading{display:flex;flex-direction:column;gap:var(--s3)}
.ladder .lad-loading-copy{font-size:var(--t-sm);color:var(--ink-3);text-align:center}
.ladder .lad-bars{display:flex;flex-direction:column;gap:var(--s1)}
.ladder .lad-bar{height:30px;border-radius:var(--r-sm);background:var(--surface-2)}
.ladder .lad-bar:nth-child(2){opacity:.86}
.ladder .lad-bar:nth-child(3){opacity:.72}
.ladder .lad-bar:nth-child(4){opacity:.58}
.ladder .lad-bar:nth-child(5){opacity:.44}
.ladder .lad-bar:nth-child(6){opacity:.3}

/* ---- narrow ------------------------------------------------------------- */
@media (max-width:560px){
  .ladder{padding:var(--s4) var(--s3) 0}
  .ladder-inner{gap:var(--s3);padding-bottom:var(--s3)}

  /* two lines per row: who and what they are rated, then the record */
  .ladder .lad-cols{display:none}
  .ladder .lad-row{
    grid-template-columns:26px minmax(0,1fr) auto;
    grid-template-areas:
      "r n g"
      "r w p";
    row-gap:2px;
    padding-top:var(--s3);padding-bottom:var(--s3);
  }
  .ladder .lad-handle{display:none}
  .ladder .lad-cell{flex-direction:row;align-items:baseline;gap:5px}
  .ladder .lad-wl,.ladder .lad-played{justify-content:flex-start}
  .ladder .lad-played{justify-content:flex-end}
  /* the captions come back, because the column strip is gone */
  .ladder .lad-row .lad-wl small,
  .ladder .lad-row .lad-played small{
    position:static;width:auto;height:auto;padding:0;margin:0;
    clip:auto;overflow:visible;
    font-size:var(--t-xs);color:var(--ink-3);
  }
  .ladder .lad-facts li,.ladder .lad-p{font-size:var(--t-sm)}
}

/* A phone keyboard-less viewport is short; a sticky bar that eats a third of
   it is worse than one that scrolls. Under 420px tall it stops sticking. */
@media (max-height:420px){
  .ladder .lad-pin{position:static}
}