/* The ladder. One table, used on the home page and on the dashboard's
   Standings tab, so the front door and your own page never disagree about who
   is winning or what a team looks like.

   Team colour is the point of the design: every row carries its team's own
   two hues on the rail, the crest and the row wash. Teams that have not bought
   colours get a stable pair from their id, so nobody is grey. */

.bl-lad { --bl-gold: #d3aa64; --bl-goldsoft: #f0d9a8; --bl-line: #1c2030; --bl-dim: #878ea3; --bl-ink: #e4e7f0; }

.bl-lad { display: flex; flex-direction: column; gap: 6px; }

.bl-lad-row {
  --h: 40; --h2: 80;
  position: relative;
  display: grid; align-items: center;
  grid-template-columns: 34px 46px minmax(0, 1fr) 74px 78px 92px minmax(0, 200px);
  gap: 12px;
  padding: 10px 14px 10px 18px;
  border: 1px solid var(--bl-line);
  border-radius: 12px;
  background:
    linear-gradient(90deg, hsl(var(--h) 62% 52% / .13), hsl(var(--h) 62% 52% / .02) 46%, transparent 70%),
    #0d1017;
  color: var(--bl-ink); text-decoration: none;
  transition: border-color .12s, transform .12s, background .12s;
}
a.bl-lad-row:hover {
  text-decoration: none; transform: translateX(2px);
  border-color: hsl(var(--h) 62% 52% / .55);
  background:
    linear-gradient(90deg, hsl(var(--h) 62% 52% / .2), hsl(var(--h) 62% 52% / .04) 46%, transparent 70%),
    #10141d;
}
/* The rail: the team's two colours, edge to edge, unmissable. */
.bl-lad-row::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px;
  border-radius: 12px 0 0 12px;
  background: linear-gradient(180deg, hsl(var(--h) 72% 58%), hsl(var(--h2) 62% 44%));
}
.bl-lad-row.bl-you { border-color: rgba(211, 170, 100, .55); }
.bl-lad-you {
  display: inline-block; margin-left: 7px; vertical-align: 2px;
  font: 700 9px/1 ui-monospace, Menlo, monospace; letter-spacing: .16em;
  color: #1a1305; background: var(--bl-goldsoft); border-radius: 4px; padding: 3px 5px;
}

.bl-lad-rank {
  font: 700 17px/1 ui-monospace, Menlo, Consolas, monospace;
  color: var(--bl-dim); font-variant-numeric: tabular-nums; text-align: center;
}
.bl-lad-row:nth-child(1) .bl-lad-rank { color: var(--bl-goldsoft); }
.bl-lad-row:nth-child(2) .bl-lad-rank,
.bl-lad-row:nth-child(3) .bl-lad-rank { color: #c8cfe0; }

.bl-lad-crest { width: 46px; height: 46px; display: block; flex: none; }
.bl-lad-crest svg { width: 100%; height: 100%; display: block; }
/* The plain shield a team wears until heraldry.js arrives, or if it has no crest. */
.bl-lad-crest.bl-plain {
  display: grid; place-items: center; border-radius: 11px;
  background: linear-gradient(160deg, hsl(var(--h) 66% 54%), hsl(var(--h2) 58% 34%));
  color: #fff; font: 800 19px/1 ui-sans-serif, sans-serif;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3);
}

.bl-lad-name { min-width: 0; }
.bl-lad-name b { display: block; font: 600 16px/1.25 ui-sans-serif, sans-serif; }
.bl-lad-name .bl-sub {
  display: block; margin-top: 2px; font-size: 11.5px; color: var(--bl-dim);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bl-lad-tag {
  display: inline-block; margin-left: 7px; padding: 1px 6px; border-radius: 5px;
  border: 1px solid var(--bl-line); font: 600 10px/1.5 ui-monospace, Menlo, monospace;
  letter-spacing: .1em; text-transform: uppercase; color: var(--bl-dim); vertical-align: 2px;
}
.bl-lad-cups { margin-left: 7px; font-size: 13px; }
.bl-lad-jersey {
  display: inline-block; margin-left: 7px; padding: 2px 7px; border-radius: 999px;
  font: 800 8.5px/1.4 ui-monospace, Menlo, monospace; letter-spacing: .12em;
  text-transform: uppercase; vertical-align: 2px; white-space: nowrap;
}
.bl-lad-jersey.bronze { background: linear-gradient(160deg, #cf9058, #8a5a2c); color: #1c0f04; }
.bl-lad-jersey.silver { background: linear-gradient(160deg, #dde2ec, #98a0b0); color: #12151c; }
.bl-lad-jersey.gold { background: linear-gradient(160deg, #f5dfae, #c39a4e); color: #1a1305; }
.bl-lad-ref {
  display: inline-block; margin-left: 7px; padding: 1px 6px; border-radius: 5px;
  border: 1px solid rgba(122, 176, 255, .45); background: rgba(122, 176, 255, .10);
  font: 700 8.5px/1.6 ui-monospace, Menlo, monospace; letter-spacing: .12em;
  text-transform: uppercase; color: #a9cbff; vertical-align: 2px;
}
.bl-lad-quiet {
  display: inline-block; margin-left: 7px; padding: 1px 6px; border-radius: 5px;
  border: 1px solid rgba(255, 111, 125, .4); background: rgba(255, 111, 125, .09);
  font: 600 8.5px/1.6 ui-monospace, Menlo, monospace; letter-spacing: .12em;
  text-transform: uppercase; color: #ff9a9a; vertical-align: 2px;
}

.bl-lad-num {
  font: 700 16px/1 ui-monospace, Menlo, Consolas, monospace;
  font-variant-numeric: tabular-nums; color: var(--bl-goldsoft);
}
.bl-lad-num small { display: block; margin-top: 4px; font: 400 10px/1 ui-sans-serif, sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--bl-dim); }
.bl-lad-rec { font: 600 15px/1 ui-monospace, Menlo, monospace; font-variant-numeric: tabular-nums; color: var(--bl-ink); }
.bl-lad-rec.bl-none { color: var(--bl-dim); font-weight: 400; }

.bl-lad-form { display: flex; gap: 3px; align-items: center; }
.bl-lad-form i {
  width: 15px; height: 15px; border-radius: 4px; display: grid; place-items: center;
  font: 700 9px/1 ui-monospace, Menlo, monospace; font-style: normal; color: #06070c;
}
.bl-lad-form i.w { background: #4ec99b; }
.bl-lad-form i.l { background: #ff6f7d; }
.bl-lad-form i.d { background: #58607a; color: #e4e7f0; }
.bl-lad-form .bl-nogames { font-size: 11px; color: var(--bl-dim); }

.bl-lad-opens { display: flex; gap: 4px; align-items: center; justify-content: flex-end; }
.bl-lad-opens img {
  width: 30px; height: 30px; object-fit: contain; object-position: bottom;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .5));
}
.bl-lad-opens .bl-unknown { font-size: 11px; color: var(--bl-dim); }

.bl-lad-head {
  display: grid; gap: 12px; padding: 0 14px 6px 18px;
  grid-template-columns: 34px 46px minmax(0, 1fr) 74px 78px 92px minmax(0, 200px);
  font: 600 9.5px/1 ui-monospace, Menlo, Consolas, monospace;
  letter-spacing: .18em; text-transform: uppercase; color: var(--bl-gold);
}
.bl-lad-head span:nth-child(1) { text-align: center; }
.bl-lad-head span:last-child { text-align: right; }

.bl-lad-first {
  margin: 0 2px 12px; padding: 9px 14px;
  border: 1px solid var(--bl-line); border-left: 3px solid var(--bl-gold);
  border-radius: 0 10px 10px 0; background: rgba(211, 170, 100, .06);
  font-size: 13px; color: var(--bl-ink);
}
.bl-lad-note { margin: 10px 2px 0; font-size: 12.5px; color: var(--bl-dim); }
.bl-lad-empty { padding: 22px; text-align: center; color: var(--bl-dim); border: 1px dashed var(--bl-line); border-radius: 12px; }

@media (max-width: 1080px) {
  .bl-lad-row, .bl-lad-head { grid-template-columns: 28px 40px minmax(0, 1fr) 66px 70px 84px; }
  .bl-lad-opens { display: none; }
}
@media (max-width: 640px) {
  .bl-lad-head { display: none; }
  /* Two lines on a phone: rank, crest and name on the left, rating over record
     on the right. Form and the opening five drop; they need width to read. */
  .bl-lad-row {
    grid-template-columns: 26px 40px minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    gap: 2px 10px; padding: 10px 12px 10px 16px;
  }
  .bl-lad-rank { grid-area: 1 / 1 / 3 / 2; }
  .bl-lad-crest { grid-area: 1 / 2 / 3 / 3; }
  .bl-lad-name { grid-area: 1 / 3 / 3 / 4; }
  .bl-lad-num { grid-area: 1 / 4 / 2 / 5; text-align: right; }
  .bl-lad-num small { display: none; }
  .bl-lad-rec { grid-area: 2 / 4 / 3 / 5; text-align: right; font-size: 12.5px; color: var(--bl-dim); }
  .bl-lad-form, .bl-lad-opens { display: none; }
}