/* ---- Elbow Room dashboard ----
   Chart, controls and table. Colours are base.css tokens; the shading ramp is
   the site's eleven diverging bins, red for the better end as on the
   leaderboard. Shared with the static version the writing embeds, which shows
   the chart alone. */

.eb { margin: 0 0 8px; position: relative; }
.eb-svg { display: block; width: 100%; height: auto; }
.eb-grid { stroke: var(--grid); stroke-width: 1; }
.eb-axis { stroke: var(--ink-muted); stroke-width: 1.5; }
.eb-tick { fill: var(--ink-2); font: 12px var(--sc-text); font-variant-numeric: tabular-nums; }
.eb-label { fill: var(--ink-2); font: 600 13px var(--sc-text); }
.eb-note { fill: var(--ink-muted); font: 11px var(--sc-text); letter-spacing: .06em; text-transform: uppercase; }
/* A halo in the page's own ground, drawn under the letterform rather than
   over it. Placement keeps a label off the dots where it can, but the
   dashboard draws 720 team-seasons and a picked line ends inside the crowd --
   there is no clear spot to move to, so the label has to carry its own
   background. paint-order is what keeps the stroke behind the fill; without
   it the text is outlined instead of haloed. */
.eb-year, .eb-move-name {
  paint-order: stroke; stroke: var(--plane); stroke-width: 3px;
  stroke-linejoin: round;
}
.eb-year { fill: var(--ink); font: 700 13px var(--sc-display); }
/* where a team changed parks: a ring on the first season in the new one, with
   the park named above it */
.eb-move circle { fill: none; stroke: var(--sc-hum); stroke-width: 2.5; opacity: .9; }
.eb-move text { fill: var(--ink); font: 700 12px var(--sc-display); letter-spacing: .02em; }
.eb-move-name { fill: var(--ink); font: 700 12px var(--sc-display); letter-spacing: .02em; }
.eb-dot { stroke: var(--surface); stroke-width: 1; cursor: pointer; }
.eb-trace { stroke: var(--ink); stroke-width: 1.6; }
.eb-kin { stroke: var(--ink); stroke-width: 1.6; opacity: 1; }
.eb-on { stroke: var(--ink); stroke-width: 2.4; }
.eb-dim { opacity: .18; }
.eb-dot:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.eb-path { fill: none; stroke: var(--ink); stroke-width: 2; opacity: .5; stroke-linejoin: round; }
/* the one step that crosses into a different building. The alternating dash
   that used to mark the second traced team is gone: dashes mean a move now,
   and nothing else, and the end labels already say which team is which. */
.eb-path-moved { stroke-dasharray: 3 6; stroke-linecap: round; opacity: .75; }
.eb-c0{fill:var(--b10)} .eb-c1{fill:var(--b9)} .eb-c2{fill:var(--b8)} .eb-c3{fill:var(--b7)}
.eb-c4{fill:var(--b6)} .eb-c5{fill:var(--b5)} .eb-c6{fill:var(--b4)} .eb-c7{fill:var(--b3)}
.eb-c8{fill:var(--b2)} .eb-c9{fill:var(--b1)} .eb-c10{fill:var(--b0)}
/* The svg scales to its container, so its text scales with it: at 310px wide
   a 12-unit tick renders under 4px. These are user units, not pixels --
   bigger numbers here are what keep the axis readable on a phone. */
/* These used to bump type to 26 and 28 here, sized for a chart drawn on a
   fixed 1000-unit viewBox: on a 375px phone that was scaled to about a third,
   so 26 units landed near 8.5px. The viewBox tracks the rendered width now and
   a unit is a pixel, so those numbers came out as literal 26px text in a 342px
   chart and the axis collapsed into itself. The sizes above are pixels and are
   already right at every width; only the dot needs a heavier ring, because a
   1px stroke is thin on a phone screen. */
@media (max-width: 640px) {
  .eb-dot { stroke-width: 2; }
}
.eb-cap { font-size: 12.5px; line-height: 1.5; color: var(--ink-2); margin-top: 10px; max-width: 92ch; }

/* An author display rule beats the browser's own [hidden] rule, so without
   this the box never hides no matter what the script sets. */
.eb-tip[hidden] { display: none; }
.eb-tip {
  position: absolute; z-index: 2; pointer-events: none; display: grid; gap: 2px;
  background: var(--surface); border: 1px solid var(--rule); border-radius: 8px;
  padding: 8px 11px; font: 13px/1.35 var(--sc-text); color: var(--ink-2);
  box-shadow: 0 2px 10px rgba(0,0,0,.10); white-space: nowrap;
}
.eb-tip b { color: var(--ink); font-family: var(--sc-display); font-size: 17px; font-weight: 800; }

/* ---- controls ---- */
.eb-controls { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px 26px; margin-bottom: 14px; }
.eb-control { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.eb-legend { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); }
.eb-years { display: flex; align-items: center; gap: 14px; }
.eb-years output { font: 600 14px var(--sc-text); font-variant-numeric: tabular-nums; color: var(--ink); }
.eb-range { position: relative; width: min(260px, 40vw); height: 22px; }
.eb-track, .eb-fill { position: absolute; top: 9px; height: 4px; border-radius: 2px; }
.eb-track { left: 0; right: 0; background: var(--surface-2, var(--grid)); }
.eb-fill { background: var(--accent); }
.eb-range input[type="range"] {
  position: absolute; left: 0; top: 0; width: 100%; height: 22px; margin: 0;
  background: none; pointer-events: none; -webkit-appearance: none; appearance: none;
}
.eb-range input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; pointer-events: auto; width: 16px; height: 16px; border-radius: 50%;
  background: var(--surface); border: 2px solid var(--accent); cursor: pointer;
}
.eb-range input[type="range"]::-moz-range-thumb {
  pointer-events: auto; width: 16px; height: 16px; border-radius: 50%;
  background: var(--surface); border: 2px solid var(--accent); cursor: pointer;
}
.eb-range input[type="range"]::-moz-range-track { background: none; }
.eb-seg { display: flex; border: 1px solid var(--rule); border-radius: 7px; overflow: hidden; }
.eb-seg button { font: 600 13px var(--sc-text); padding: 6px 13px; border: 0; cursor: pointer; background: transparent; color: var(--ink-2); }
.eb-seg button[aria-pressed="true"] { background: var(--ink); color: var(--plane); }
.eb-clear { font: 600 13px var(--sc-text); padding: 6px 12px; cursor: pointer; color: var(--ink-2); background: transparent; border: 1px solid var(--rule); border-radius: 7px; }
.eb-clear:hover { color: var(--ink); }

/* ---- club picker, by division ---- */
.eb-picker { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 14px; margin-bottom: 18px; }
.eb-div { background: var(--surface); border: 1px solid var(--ring); border-radius: 8px; padding: 8px 10px 10px; }
.eb-div-name { margin: 0 0 6px; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted); }
.eb-div-clubs { display: flex; flex-wrap: wrap; gap: 4px; }
.eb-chip {
  font: 600 11.5px var(--sc-text); letter-spacing: .02em; padding: 4px 7px; cursor: pointer;
  background: transparent; color: var(--ink-2); border: 1px solid var(--ring); border-radius: 5px;
}
.eb-chip:hover { border-color: var(--rule); color: var(--ink); }
.eb-chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--plane); }
/* Six division boxes in one column filled most of a phone screen before
   the chart. Two columns hold all six in three rows, and the chips are
   still a comfortable tap at 11.5px in a 4px gap. */
@media (max-width: 760px) { .eb-picker { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } }
@media (max-width: 480px) { .eb-div { padding: 7px 8px 8px; } .eb-chip { padding: 5px 6px; } }

/* ---- table ---- */
.eb-tablewrap { margin-top: 26px; overflow-x: auto; }
.eb-table { border-collapse: collapse; width: 100%; font-size: 13px; }
.eb-table th, .eb-table td { padding: 6px 9px; border-bottom: 1px solid var(--grid); white-space: nowrap; }
.eb-table th {
  position: sticky; top: 0; background: var(--plane); cursor: pointer; text-align: left;
  font: 600 11.5px var(--sc-text); letter-spacing: .05em; text-transform: uppercase; color: var(--ink-2);
}
.eb-table th:hover { color: var(--ink); }
.eb-table th.eb-n, .eb-table td.eb-n { text-align: right; font-variant-numeric: tabular-nums; }
.eb-table tbody tr { cursor: pointer; }
/* The row under the pointer. A filled cell keeps its fill untouched: the ramp
   picks the ink per step -- white through the dark middle, near-black at both
   ends -- so a single tint direction always moves one step the wrong way.
   Lightening takes dark b2 to 4.44:1, darkening takes light b10 to 4.40:1,
   and the old `background: var(--row-hover)` was worse still: being a
   shorthand it replaced the fill outright and left the ramp's dark ink on the
   dark plane at 1.13:1. Rule the row in each cell's own ink instead. That ink
   was already chosen against that fill, so it clears 4.73:1 in light and
   4.93:1 in dark on every step, and no color moves. Cells with no fill still
   take the usual tint. */
.eb-table tbody tr:hover td {
  box-shadow: inset 0 1px 0 currentColor, inset 0 -1px 0 currentColor;
}
.eb-table tbody tr:hover td:not([class*="eb-p"]) {
  background-image: linear-gradient(var(--row-hover), var(--row-hover));
}
.eb-row-on td.eb-t { font-weight: 700; color: var(--ink); }
/* td.eb-pN is element-plus-class and would outrank a bare .pN rule, which once
   painted the theme's ink over a band's own ink; the ink comes with the bin */
.eb-table td.eb-p0{background:var(--b0);color:var(--i0)}   .eb-table td.eb-p1{background:var(--b1);color:var(--i1)}
.eb-table td.eb-p2{background:var(--b2);color:var(--i2)}   .eb-table td.eb-p3{background:var(--b3);color:var(--i3)}
.eb-table td.eb-p4{background:var(--b4);color:var(--i4)}   .eb-table td.eb-p5{background:var(--b5);color:var(--i5)}
.eb-table td.eb-p6{background:var(--b6);color:var(--i6)}   .eb-table td.eb-p7{background:var(--b7);color:var(--i7)}
.eb-table td.eb-p8{background:var(--b8);color:var(--i8)}   .eb-table td.eb-p9{background:var(--b9);color:var(--i9)}
.eb-table td.eb-p10{background:var(--b10);color:var(--i10)}