/* Simulated Portfolio Challenge standings.
   Scoped to the one section on draft3-capital-work.html. Nothing here leaks
   into another page, because no other page loads this file.

   The section obeys the draft3 rules: cream canvas, hairlines as the only
   separator, ink and muted text, no boxes, no shadows, no gradients, no border
   radius past 2px, no uppercase category labels. Everything is drawn with type,
   spacing and 1px rules.

   SERIES COLOURS. Four categorical hues, in fixed slot order, assigned to a
   team by identity and never by rank, so filtering or a reshuffle never
   repaints a line the reader has already learned. Validated against the cream
   surface #fbf7f0 with the dataviz palette validator, all pairs rather than
   adjacent pairs, because a line chart shows every series at once:

     lightness band   PASS  all 4 inside L 0.43-0.77
     chroma floor     PASS  all 4 >= 0.1
     CVD separation   PASS  worst all-pairs 9.6 deutan, 10.6 tritan
     normal vision    PASS  worst all-pairs 18.2
     contrast         PASS  all 4 >= 3:1 against the cream

   The site accent #0A4A6E is deliberately NOT one of the four. It failed the
   lightness band and the chroma floor on this surface, so slot 1 is the same
   blue stepped up to #1E6E9E. The accent keeps its own job on links.

   A fifth team is never a generated fifth hue. The chart plots the top four and
   the table carries everyone, which is the honest way to run out of slots. */

.lb-section {
  --lb-s1: #1E6E9E;
  --lb-s2: #C85A12;
  --lb-s3: #8C2450;
  --lb-s4: #3E9E72;
  /* The benchmark is a reference, not an identity, so it gets no categorical
     slot. Neutral, dashed, and recessive on purpose. */
  --lb-bench: #8a837a;
  --lb-grid: #e6dfd2;
}

/* ---- heading block ------------------------------------------------------- */

.lb-note {
  margin-top: 14px;
  max-width: 62ch;
  color: var(--muted);
  font-size: 0.9375rem;
  line-height: 1.6;
}

.lb-asof {
  margin-top: 18px;
  color: var(--muted);
  font-size: 0.8125rem;
  letter-spacing: 0.01em;
}
.lb-asof .lb-stale {
  color: var(--ink);
  border-bottom: 1px solid var(--rule);
  padding-bottom: 1px;
}

/* ---- the single-line states: loading, empty, failure --------------------- */

.lb-state {
  margin-top: 32px;
  padding-top: 20px;
  border-top: 1px solid var(--rule);
  color: var(--muted);
  font-size: 0.9375rem;
  max-width: 62ch;
}

/* ---- chart --------------------------------------------------------------- */

.lb-chart {
  margin-top: 36px;
  padding-top: 28px;
  border-top: 1px solid var(--rule);
}

.lb-chart-title {
  font-family: var(--serif);
  font-size: 22px;
  line-height: 1.2;
  margin: 0 0 4px;
}
.lb-chart-sub {
  color: var(--muted);
  font-size: 0.8125rem;
  margin: 0 0 22px;
}

.lb-svg-wrap { width: 100%; }
.lb-svg { display: block; width: 100%; height: auto; overflow: visible; }

.lb-axis-line { stroke: var(--rule); stroke-width: 1; }
.lb-grid-line { stroke: var(--lb-grid); stroke-width: 1; }
/* The zero line is the only grid line that means something, so it is the only
   one that gets ink. Everything else stays under the data. */
.lb-zero-line { stroke: #c9c0b1; stroke-width: 1; }

.lb-tick {
  fill: var(--muted);
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 400;
}
.lb-tick--y { text-anchor: end; }
.lb-tick--x { text-anchor: middle; }

.lb-line {
  fill: none;
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.lb-line--bench {
  stroke: var(--lb-bench);
  stroke-width: 1.5;
  stroke-dasharray: 4 4;
}

.lb-endlabel {
  font-family: var(--sans);
  font-size: 11.5px;
  font-weight: 500;
  /* Text wears text tokens, not the series colour. The 8px dot beside it
     carries the identity. */
  fill: var(--ink);
  dominant-baseline: middle;
}
.lb-endlabel--bench { fill: var(--muted); }

/* Entrance draw. Removed entirely under reduced motion, below. */
.lb-line--anim {
  stroke-dasharray: var(--len);
  stroke-dashoffset: var(--len);
  animation: lb-draw 900ms var(--ease, ease) forwards;
}
@keyframes lb-draw { to { stroke-dashoffset: 0; } }

@media (prefers-reduced-motion: reduce) {
  .lb-line--anim {
    animation: none;
    stroke-dasharray: none;
    stroke-dashoffset: 0;
  }
  /* The dashed benchmark must keep its dashes when the draw is disabled. */
  .lb-line--bench { stroke-dasharray: 4 4; }
}

/* ---- legend -------------------------------------------------------------- */

.lb-legend {
  list-style: none;
  margin: 20px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  font-size: 0.8125rem;
  color: var(--muted);
}
.lb-legend li { display: flex; align-items: center; gap: 8px; }
.lb-swatch {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  flex: 0 0 auto;
}
.lb-swatch--bench {
  height: 0;
  width: 14px;
  border-radius: 0;
  border-top: 1.5px dashed var(--lb-bench);
}

/* ---- table --------------------------------------------------------------- */

.lb-table-wrap {
  margin-top: 44px;
  padding-top: 28px;
  border-top: 1px solid var(--rule);
  overflow-x: auto;
}

.lb-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
  min-width: 460px;
}
.lb-table caption {
  text-align: left;
  font-family: var(--serif);
  font-size: 22px;
  line-height: 1.2;
  margin-bottom: 18px;
  color: var(--ink);
}
.lb-table th,
.lb-table td {
  padding: 13px 16px 13px 0;
  border-bottom: 1px solid var(--rule);
  text-align: left;
  vertical-align: baseline;
}
.lb-table thead th {
  /* Sentence case. No uppercase category labels anywhere on this site. */
  font-weight: 500;
  font-size: 0.8125rem;
  color: var(--muted);
  padding-bottom: 10px;
}
.lb-table tbody tr:last-child th,
.lb-table tbody tr:last-child td { border-bottom: 1px solid var(--rule); }

.lb-c-rank { width: 3.5em; color: var(--muted); font-variant-numeric: tabular-nums; }
.lb-c-num {
  text-align: right;
  padding-right: 0;
  font-variant-numeric: tabular-nums;
}
th.lb-c-num { text-align: right; }

.lb-team { font-weight: 400; }
.lb-team-inner { display: flex; align-items: center; gap: 10px; }
.lb-dot {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  flex: 0 0 auto;
}
.lb-dot--none { background: transparent; border: 1px solid var(--rule); }

.lb-unranked {
  color: var(--muted);
  font-size: 0.8125rem;
}

.lb-foot {
  margin-top: 20px;
  color: var(--muted);
  font-size: 0.8125rem;
  max-width: 62ch;
  line-height: 1.6;
}

/* The chart's text alternative. Present for assistive technology, and it is the
   same numbers the visible table shows, so nothing is hidden from anyone. */
.lb-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---- narrow -------------------------------------------------------------- */

@media (max-width: 768px) {
  .lb-chart-title, .lb-table caption { font-size: 20px; }
  .lb-legend { gap: 6px 18px; }
}

@media (max-width: 480px) {
  /* Tuned so the four columns fit inside a 390px viewport without the wrapper
     needing to scroll. The wrapper keeps its overflow-x anyway, because a long
     team name can still push past this. */
  .lb-table { font-size: 0.8125rem; min-width: 300px; }
  .lb-table th, .lb-table td { padding: 11px 8px 11px 0; }
  .lb-c-rank { width: 2.4em; }
  .lb-table thead th { font-size: 0.75rem; }
  .lb-tick { font-size: 10px; }
  /* Below this width the end-of-line labels collide with each other, so the
     legend carries identity on its own and the labels are dropped. */
  .lb-endlabel { display: none; }
}