/* Shared by the four figures in the Klay case study, so they read as one set
   rather than four charts that happen to sit in the same post.

   Warriors blue and gold carry the team's own numbers; everything that is not
   the Warriors is grey, and the counterfactual is a red dashed line. The
   shaded band is the same seasons in all four: the ones Klay missed. */

:root {
  --gsw-blue: #1d428a;
  --gsw-gold: #ffc72c;
  --counter: #c8102e;
  --league: #8e9299;
  --ink: #16181d;
  --muted: #5f636b;
  --paper: #fff;
  --grid: #e7e4dc;
  --band: rgba(255, 199, 44, 0.16);
  --band-edge: rgba(255, 199, 44, 0.55);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 14px 4px 10px;
  background: var(--paper);
  color: var(--ink);
  font-family: 'Times New Roman', Times, serif;
  font-size: 15px;
  line-height: 1.5;
}

.chart-head { margin: 0 6px 10px; }
.chart-title { font-size: 16px; font-weight: bold; margin: 0; }
.chart-note { font-size: 13px; color: var(--muted); margin: 3px 0 0; }

.chart-wrap { position: relative; }
canvas { display: block; width: 100%; max-width: 900px; margin: 0 auto; }

/* Follows the cursor rather than sitting in a corner, so the number is next to
   the point it belongs to. */
.tip {
  position: absolute;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -120%);
  transition: opacity 0.12s ease;
  background: var(--ink);
  color: #fff;
  padding: 6px 9px;
  border-radius: 5px;
  font-size: 12.5px;
  line-height: 1.35;
  white-space: nowrap;
  z-index: 3;
}
.tip.is-on { opacity: 1; }
.tip-season { font-weight: bold; }
.tip-row { display: flex; align-items: center; gap: 6px; }
.tip-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }

.legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 16px;
  margin: 12px auto 0;
  max-width: 900px;
  padding: 0 6px;
}
/* Every entry is a switch. Four series on one axis is a lot to read at once,
   and being able to drop one is the whole of the interactivity here. */
.legend button,
.legend > span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: none;
  border: 0;
  padding: 2px 0;
  font: inherit;
  font-size: 13.5px;
  color: var(--ink);
  cursor: pointer;
}
.legend > span { cursor: default; }
.legend button[aria-pressed='false'] { color: var(--muted); text-decoration: line-through; }
.legend button[aria-pressed='false'] .swatch { opacity: 0.3; }
.legend .swatch { width: 15px; height: 3px; border-radius: 2px; flex: 0 0 auto; }
.legend .swatch.is-dashed {
  height: 0;
  border-top: 3px dashed currentColor;
  border-radius: 0;
}
.legend .swatch.is-bar { height: 11px; width: 11px; border-radius: 2px; }

.hint {
  text-align: center;
  font-size: 12.5px;
  color: var(--muted);
  margin: 8px 0 0;
}

@media (max-width: 520px) {
  body { font-size: 14px; }
  .legend { gap: 4px 12px; }
  .legend button { font-size: 12.5px; }
}