/* Timeline page (timeline/index.html, drawn by chart.js). Every colour and font is a theme token, so the
   Fantasy and Space themes both work. On a desktop screen the page fills the window under the top bar like an
   app: a toolbar, then the chart (or the list) with the details panel beside it. The footer follows below.
   The lane sizes here match the numbers at the top of chart.js. */

/* Each game is drawn in its system's chip colour. */
.sys-sw { --c: var(--sw); }
.sys-dnd { --c: var(--dnd); }
.sys-oth { --c: var(--oth); }
.sys-mixed { --c: var(--mixed); }

.topbar + main.tl-app { padding-top: 0; }
.tl-page .site-footer { margin-top: 28px; }

.tl-app {
  display: flex;
  flex-direction: column;
  /* --tl-top is the real top bar height, set by chart.js. */
  height: calc(100vh - var(--tl-top, 67px));
  height: calc(100dvh - var(--tl-top, 67px));
  min-height: 540px;
  padding: 0 16px;
}

/* Toolbar: title, view switch, filters and the count, in one row on wide screens. */
/* The page heading sits above the toolbar, with air between it and the site top bar. */
.tl-banner { flex: none; margin: 0; padding: 16px 2px 0; font-size: 26px; line-height: 30px; letter-spacing: -0.005em; }

.tl-bar {
  flex: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 18px;
  padding: 9px 2px 8px;
}
.tl-title { display: flex; flex-direction: column; gap: 1px; margin-right: 6px; }
.tl-h1 { font-size: 22px; line-height: 24px; letter-spacing: -0.005em; }
.tl-lede { font-size: 13.5px; line-height: 17px; color: var(--dim); white-space: nowrap; }
.tl-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.tl-count-wrap { display: flex; align-items: center; gap: 4px 14px; margin-left: auto; }
.tl-count { font-size: 14px; color: var(--dim); white-space: nowrap; }
.tl-count b { color: var(--text); font-weight: var(--bold); }
.tl-clear {
  min-height: 30px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent-text);
  font: var(--bold) 14px/1 var(--font-body);
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: pointer;
  white-space: nowrap;
}
.tl-clear:hover { color: var(--text); }
.tl-noscript { padding: 24px 0; font-size: 17px; color: var(--dim); }
.tl-noscript a { color: var(--accent-text); text-decoration: underline; }

/* Segmented buttons: the view switch and the system filter. */
.tl-seg {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: rgba(0, 0, 0, 0.22);
}
.tl-seg button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 30px;
  padding: 0 12px;
  border: 0;
  border-radius: calc(var(--radius-sm) - 4px);
  background: transparent;
  color: var(--dim);
  font: var(--bold) 13.5px/1 var(--font-body);
  white-space: nowrap;
  cursor: pointer;
}
.tl-seg button:hover { color: var(--text); background: var(--panel-2); }
.tl-seg button[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); }
.tl-seg svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.tl-dot { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 1.5px rgba(0, 0, 0, 0.35); }

/* A select with its name inside the same frame: "Host  Evil (14)". */
.tl-pick {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 38px;
  padding-left: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: rgba(0, 0, 0, 0.22);
  cursor: pointer;
}
.tl-pick:hover { border-color: var(--line-2); }
.tl-pick::after {
  content: "";
  position: absolute;
  right: 13px;
  top: 50%;
  width: 6px;
  height: 6px;
  margin-top: -5px;
  border-right: 2px solid var(--dim);
  border-bottom: 2px solid var(--dim);
  transform: rotate(45deg);
  pointer-events: none;
}
.tl-pick-name {
  margin-right: 8px;
  font: var(--bold) 11px/1 var(--font-body);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--dim);
}
.tl-pick select {
  -webkit-appearance: none;
  appearance: none;
  height: 36px;
  min-width: 0;
  padding: 0 32px 0 0;
  border: 0;
  background: transparent;
  color: var(--text);
  font: var(--bold) 14px/1 var(--font-body);
  cursor: pointer;
}
.tl-pick select:focus-visible { outline: none; }
.tl-pick:focus-within { border-color: var(--accent-text); }
.tl-pick option { background: var(--panel); color: var(--text); }
@supports selector(:has(a)) {
  .tl-pick:has(select:focus-visible) { outline: 3px solid var(--sw); outline-offset: 2px; }
}

/* The stage holds the chart or the list, and the details panel when a game is open. */
.tl-stage {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  padding-bottom: 10px;
}
.tl-chart, .tl-list { grid-row: 1; grid-column: 1; }

.tl-chart {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--bg);
}

/* Panning is the browser's own scrolling, so touch, trackpads, the wheel and the scrollbars all work. */
.tl-scroll {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  overscroll-behavior-x: contain;
  /* Room for a vertical scrollbar is always kept, so one appearing never changes the width and refits the chart. */
  scrollbar-gutter: stable;
  scrollbar-color: var(--line-2) var(--bg);
  cursor: grab;
}
.tl-scroll.is-panning { cursor: grabbing; }
.tl-track { position: relative; min-width: 100%; -webkit-user-select: none; user-select: none; }

/* Background: a shaded band for every other year and a line at each new year. */
.tl-stripes, .tl-hl, .tl-today { position: absolute; top: 0; bottom: 0; pointer-events: none; }
.tl-stripes { left: 0; right: 0; }
.st { position: absolute; top: 0; bottom: 0; border-left: 1px solid var(--line); }
.st.is-odd::before, .ax-y.is-odd::before { content: ""; position: absolute; inset: 0; background: var(--panel); opacity: 0.55; }
.st.is-first { border-left: 0; }
.st.is-nodate { background: repeating-linear-gradient(135deg, var(--panel) 0 6px, transparent 6px 12px); opacity: 0.6; }

/* The span of the game under the pointer, or the picked one, shaded down the whole chart. */
.tl-hl { z-index: 1; background: var(--c); opacity: 0.11; }
.tl-today { z-index: 1; width: 2px; margin-left: -1px; background: var(--accent); }

/* The axis sticks to the top of the chart. Years on top, months under them, day numbers when zoomed in close. */
.tl-axis {
  position: sticky;
  top: 0;
  z-index: 6;
  height: 36px;
  overflow: clip;
  background: var(--bg);
  border-bottom: 1px solid var(--line-2);
}
.ax-y { position: absolute; top: 0; bottom: 0; border-left: 1px solid var(--line-2); overflow: clip; }
.ax-y.is-first { border-left: 0; }
.ax-y span {
  position: sticky;
  left: 0;
  z-index: 1;
  display: inline-block;
  padding: 3px 8px 0;
  font: 700 15px/18px var(--font-display);
  color: var(--text);
}
.ax-m, .ax-d {
  position: absolute;
  overflow: clip;
  padding-left: 4px;
  border-left: 1px solid var(--line);
  font: var(--bold) 10.5px/15px var(--font-body);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--dim);
  white-space: nowrap;
}
.ax-m { top: 20px; height: 16px; }
.ax-m.is-jan { border-left: 0; }
.ax-d { top: 36px; height: 16px; letter-spacing: 0; }
.ax-nodate {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  padding: 3px 10px 0 16px;
  font: var(--bold) 12px/18px var(--font-body);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dim);
}
.ax-today {
  position: absolute;
  top: 3px;
  z-index: 3;
  padding: 3px 7px;
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: var(--on-accent);
  font: var(--bold) 10.5px/1 var(--font-body);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  white-space: nowrap;
  transform: translateX(-50%);
}
/* Exact dates of the game under the pointer, flagged on the axis. */
.ax-flags { position: absolute; left: 0; right: 0; top: 19px; height: 17px; z-index: 4; pointer-events: none; }
.ax-flag {
  position: absolute;
  top: 0;
  height: 17px;
  padding: 0 6px;
  border-radius: 4px;
  background: var(--text);
  color: var(--bg);
  font: var(--bold) 11.5px/17px var(--font-body);
  white-space: nowrap;
}
.ax-flag.is-end { transform: translateX(-100%); }
.ax-flag.is-mid { transform: translateX(-50%); }

/* Bands: a header with the name and count, then the lanes. The name stays in view while panning. */
.tl-bands { position: relative; z-index: 2; }
/* Row sizes: the item height, name size, thumbnail, bar and diamond. They match DENS in chart.js. */
.tl-bands, .d-comfy { --g-h: 26px; --g-font: 13px; --g-lh: 16px; --thumb: 16px; --bar-top: 19px; --bar-h: 7px; --dia: 9px; --dia-top: 18px; }
.d-large { --g-h: 36px; --g-font: 16px; --g-lh: 20px; --thumb: 20px; --bar-top: 25px; --bar-h: 9px; --dia: 11px; --dia-top: 24px; }
.d-roomy { --g-h: 31px; --g-font: 14.5px; --g-lh: 18px; --thumb: 18px; --bar-top: 22px; --bar-h: 8px; --dia: 10px; --dia-top: 21px; }
.d-compact { --g-h: 22px; --g-font: 12px; --g-lh: 14px; --thumb: 14px; --bar-top: 16px; --bar-h: 6px; --dia: 8px; --dia-top: 15px; }
.tl-band-head { height: 22px; display: flex; align-items: flex-end; border-top: 1px solid var(--line-2); }
.tl-band:first-child .tl-band-head { border-top: 0; }
.tl-band-name {
  position: sticky;
  left: 0;
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  padding: 0 10px 1px 14px;
  font: var(--bold) 11.5px/18px var(--font-body);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-text);
  white-space: nowrap;
}
.tl-band-name small { font-size: 11.5px; letter-spacing: 0.04em; color: var(--dim); }
.tl-lanes { position: relative; }

/* A game: its name on top, starting where its mark starts, and the mark (a bar or a diamond) under it.
   chart.js sets the box to cover both, so games in one lane never touch. */
.g {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  height: var(--g-h);
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 5px;
  background: none;
  color: var(--text);
  font: var(--bold) var(--g-font)/var(--g-lh) var(--font-body);
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
}
.g:focus-visible { outline-offset: 1px; }
/* A long bar keeps its name in view when its start is panned off to the left. */
.g-label {
  position: sticky;
  left: 8px;
  display: flex;
  align-items: center;
  gap: 5px;
  width: max-content;
  height: var(--g-lh);
  border-radius: 4px;
  /* A halo in the page colour keeps names readable where the Today line or a year line runs behind them. */
  text-shadow: 0 0 3px var(--bg), 0 0 2px var(--bg), 0 0 1px var(--bg);
}
.g-thumb { flex: none; width: var(--thumb); height: var(--thumb); border-radius: 3px; object-fit: cover; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.45); }
.g-host, .g-tag { font-weight: 500; color: var(--dim); }
.g-host::before, .g-tag::before { content: "\00b7"; margin: 0 5px 0 1px; }
.by-host .g-host, .by-status .g-tag { display: none; }
.g:hover .g-name { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.g-mark { position: absolute; top: var(--bar-top); left: 0; height: var(--bar-h); border-radius: 4px; background: var(--c); }
.g:hover .g-mark { filter: brightness(1.15); }
.g.on-today .g-label { background: var(--bg); box-shadow: 0 0 0 3px var(--bg); }

/* Still active: the bar runs to the Today line and ends in an arrow just past it. */
.k-now .g-mark { border-radius: 4px 0 0 4px; }
.k-now .g-mark::after {
  content: "";
  position: absolute;
  left: 100%;
  top: 50%;
  width: 0;
  height: 0;
  margin-top: -6.5px;
  border-left: 11px solid var(--c);
  border-top: 6.5px solid transparent;
  border-bottom: 6.5px solid transparent;
}
/* No start date: the bar fades in from nowhere. */
.k-nostart .g-mark { border-radius: 0; background: linear-gradient(90deg, transparent, var(--c) 85%); }
/* On a break after its last recorded session: a real end, then a pause mark. */
.k-pause .g-mark::after {
  content: "";
  position: absolute;
  left: calc(100% + 5px);
  top: -1.5px;
  width: 8px;
  height: 10px;
  background: linear-gradient(90deg, var(--dim) 0 3px, transparent 3px 5px, var(--dim) 5px 8px);
  border-radius: 1px;
}
/* A start or end that was never recorded: the bar fades out over a fixed length, so it never claims a date. */
.k-openend .g-mark { border-radius: 4px 0 0 4px; background: linear-gradient(90deg, var(--c) var(--solid, 10px), transparent); }
.k-openstart .g-mark { border-radius: 0 4px 4px 0; background: linear-gradient(270deg, var(--c) var(--solid, 10px), transparent); }
/* Only the year is known: a hatched, dashed bar. */
.k-approx .g-mark {
  border: 1.5px dashed var(--c);
  background: repeating-linear-gradient(135deg, var(--c) 0 2px, transparent 2px 6px);
  opacity: 0.85;
}
/* One session: a diamond that keeps its size at every zoom. */
.k-point .g-mark {
  width: var(--dia);
  height: var(--dia);
  top: var(--dia-top);
  border-radius: 2px;
  box-shadow: 0 0 0 2px var(--bg);
  transform: rotate(45deg);
}
.k-point.k-approx .g-mark { background: var(--bg); border: 1.5px dashed var(--c); opacity: 1; }
/* No date at all: a dashed ring in the No date strip. */
.k-none .g-mark { top: calc(var(--bar-top) + var(--bar-h) / 2 - 6px); width: 12px; height: 12px; border: 1.5px dashed var(--dim); border-radius: 50%; background: transparent; }

/* The picked game: its name turns into a solid tag and its mark gets a ring. */
.g.is-sel .g-label { background: var(--text); color: var(--bg); box-shadow: -4px 0 0 var(--text), 4px 0 0 var(--text); text-shadow: none; }
.g.is-sel .g-host, .g.is-sel .g-tag { color: var(--bg); opacity: 0.78; }
.g.is-sel .g-mark { filter: brightness(1.2); }
/* A diamond sits clear of its name, so it can take a ring as well. */
.g.is-sel.k-point .g-mark { box-shadow: 0 0 0 2px var(--bg), 0 0 0 3.5px var(--text); }
.g.is-sel .g-name { text-decoration: none; }
/* A game named in the details panel, under the pointer there. */
.g.is-hint .g-label { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent); }

.tl-empty {
  position: absolute;
  left: 16px;
  top: 56px;
  z-index: 8;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  font-size: 15px;
  color: var(--dim);
}

/* Hover and focus tip */
.tl-tip {
  position: absolute;
  z-index: 20;
  max-width: min(340px, calc(100% - 16px));
  padding: 9px 12px;
  border: 1px solid var(--line-2);
  border-radius: var(--radius-sm);
  background: var(--panel-2);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
  font-size: 13px;
  line-height: 19px;
  color: var(--dim);
  pointer-events: none;
}
.tl-tip b { display: block; margin-bottom: 2px; font-size: 14px; line-height: 19px; color: var(--text); }
.tl-tip span { display: block; }
.tl-tip .tip-when { color: var(--text); }

/* Under the chart: the key on the left, zoom and position on the right. */
.tl-foot {
  flex: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 22px;
  padding: 3px 4px 3px 14px;
  border-top: 1px solid var(--line);
  background: var(--panel);
}
.tl-key {
  flex: 1 1 420px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 12.5px;
  line-height: 18px;
  color: var(--dim);
}
.tl-key li { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.tl-key .key-sep { width: 1px; height: 14px; background: var(--line-2); }
.kk { position: relative; flex: none; display: inline-block; width: 22px; height: 7px; border-radius: 4px; background: var(--c, var(--text)); }
.kk.is-dot { width: 9px; height: 9px; margin: 0 6px; border-radius: 2px; transform: rotate(45deg); }
.kk.is-now { width: 16px; margin-right: 9px; border-radius: 4px 0 0 4px; }
.kk.is-now::after { content: ""; position: absolute; left: 100%; top: -3px; border-left: 9px solid var(--text); border-top: 6.5px solid transparent; border-bottom: 6.5px solid transparent; }
.kk.is-pause { width: 14px; margin-right: 12px; }
.kk.is-pause::after { content: ""; position: absolute; left: calc(100% + 4px); top: -1.5px; width: 8px; height: 10px; background: linear-gradient(90deg, var(--dim) 0 3px, transparent 3px 5px, var(--dim) 5px 8px); }
.kk.is-fade-end { border-radius: 4px 0 0 4px; background: linear-gradient(90deg, var(--text) 30%, transparent); }
.kk.is-fade-start { border-radius: 0 4px 4px 0; background: linear-gradient(270deg, var(--text) 30%, transparent); }
.kk.is-approx { border: 1.5px dashed var(--text); background: repeating-linear-gradient(135deg, var(--text) 0 2px, transparent 2px 6px); height: 9px; }
.kk.is-none { width: 11px; height: 11px; border: 1.5px dashed var(--dim); border-radius: 50%; background: transparent; }

.tl-zoom { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.tl-range { margin-right: 8px; font-size: 12.5px; color: var(--dim); white-space: nowrap; font-variant-numeric: tabular-nums; }
.tl-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 32px;
  height: 32px;
  padding: 0 12px;
  border: 1px solid var(--line-2);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text);
  font: var(--bold) 13.5px/1 var(--font-body);
  white-space: nowrap;
  cursor: pointer;
}
.tl-btn:hover:not(:disabled) { background: var(--panel-2); }
.tl-btn:disabled { opacity: 0.4; cursor: default; }
.tl-icon { width: 32px; padding: 0; }
.tl-icon svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }

.tl-keys { position: relative; }
.tl-keys-pop {
  position: absolute;
  right: 0;
  bottom: calc(100% + 10px);
  z-index: 30;
  width: min(380px, calc(100vw - 32px));
  padding: 14px 16px 16px;
  border: 1px solid var(--line-2);
  border-radius: var(--radius-sm);
  background: var(--panel-2);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.55);
  font-size: 13.5px;
  line-height: 19px;
}
.tl-keys-title { margin-bottom: 8px; font: var(--bold) 12px/1.2 var(--font-body); letter-spacing: 0.09em; text-transform: uppercase; color: var(--accent-text); }
.tl-keys-pop dl { display: flex; flex-direction: column; gap: 5px; margin: 0; }
.tl-keys-pop dl div { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 10px; }
.tl-keys-pop dt { color: var(--text); font-weight: var(--bold); }
.tl-keys-pop dd { margin: 0; color: var(--dim); }
.tl-keys-pop kbd {
  display: inline-block;
  min-width: 20px;
  padding: 1px 5px;
  border: 1px solid var(--line-2);
  border-radius: 4px;
  font: var(--bold) 12px/16px var(--font-body);
  text-align: center;
}
.tl-keys-note { margin-top: 10px; color: var(--dim); }

/* Details panel, docked beside the chart or the list. */
.tl-stage.has-details { grid-template-columns: minmax(0, 1fr) 392px; }
.tl-details {
  grid-row: 1;
  grid-column: 2;
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--panel);
  scrollbar-color: var(--line-2) var(--panel);
}
.tl-d-close {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--line-2);
  border-radius: 50%;
  background: var(--panel);
  color: var(--text);
  cursor: pointer;
}
.tl-d-close:hover { background: var(--panel-2); }
.tl-d-close svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.tl-d-art { position: relative; flex: none; aspect-ratio: 16 / 9; overflow: hidden; border-bottom: 1px solid var(--line); }
.tl-d-art img { position: absolute; inset: 0; width: 100%; height: 100%; }
.tl-d-strip { flex: none; height: 8px; background: var(--c); }
.tl-d-body { display: flex; flex-direction: column; gap: 14px; padding: 18px 20px 22px; }
.tl-d-art + .tl-d-body { padding-top: 16px; }
.tl-d-strip + .tl-d-body { padding-top: 16px; padding-right: 56px; }
.tl-d-title { font-size: 25px; line-height: 29px; }
.tl-d-title:focus { outline: none; }
.tl-d-title:focus-visible { outline: 3px solid var(--sw); outline-offset: 3px; }
.tl-d-facts { display: flex; flex-direction: column; gap: 6px; margin: 0; font-size: 14.5px; line-height: 21px; }
.tl-d-facts div { display: grid; grid-template-columns: 78px minmax(0, 1fr); gap: 12px; }
.tl-d-facts dt { font-weight: var(--bold); color: var(--dim); }
.tl-d-facts dd { margin: 0; min-width: 0; }
.tl-d-desc { font-size: 15px; line-height: 23px; color: var(--dim); }
.tl-d-links { display: flex; flex-wrap: wrap; gap: 10px; }
.tl-d-links .btn { height: 40px; padding: 0 18px; font-size: 15px; }
.tl-d-sub {
  margin-top: 4px;
  font: var(--bold) 11.5px/1.3 var(--font-body);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--accent-text);
}
.tl-d-more { display: flex; flex-direction: column; margin: -6px -10px 0; padding: 0; list-style: none; }
.tl-d-more button {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 6px 10px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--text);
  font: var(--bold) 14px/19px var(--font-body);
  text-align: left;
  cursor: pointer;
}
.tl-d-more button:hover { background: var(--panel-2); }
.tl-d-more button small { flex: none; font-size: 12.5px; font-weight: 500; color: var(--dim); }
.tl-d-more i { display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: var(--c); vertical-align: 1px; }

/* List view: one table row per game, in the same three sections, sortable by any column. */
.tl-list {
  min-width: 0;
  min-height: 0;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--bg);
  scrollbar-color: var(--line-2) var(--bg);
}
.tl-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14.5px; line-height: 20px; }
.tl-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  height: 38px;
  padding: 0 14px;
  border-bottom: 1px solid var(--line-2);
  background: var(--panel);
  font: var(--bold) 11.5px/1 var(--font-body);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dim);
  text-align: left;
  white-space: nowrap;
}
.tl-table thead button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 30px;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: pointer;
}
.tl-table thead button:hover { color: var(--text); }
.tl-table thead button::after { content: ""; width: 0; height: 0; border-left: 4.5px solid transparent; border-right: 4.5px solid transparent; opacity: 0; }
.tl-table th[aria-sort] button { color: var(--text); }
.tl-table th[aria-sort="ascending"] button::after { border-bottom: 6px solid var(--accent-text); opacity: 1; }
.tl-table th[aria-sort="descending"] button::after { border-top: 6px solid var(--accent-text); opacity: 1; }
.tl-sec th {
  padding: 20px 14px 8px;
  border-bottom: 1px solid var(--line);
  font: 700 19px/22px var(--font-display);
  color: var(--accent-text);
  text-align: left;
}
.tl-sec:first-child th { padding-top: 14px; }
.tl-sec small { margin-left: 8px; font: var(--bold) 13px/1 var(--font-body); color: var(--dim); }
.tl-yr th {
  padding: 12px 14px 5px;
  border-bottom: 1px solid var(--line);
  font: var(--bold) 12px/1 var(--font-body);
  letter-spacing: 0.1em;
  color: var(--dim);
  text-align: left;
}
.tl-row > * { padding: 7px 14px; border-bottom: 1px dashed var(--line); vertical-align: middle; text-align: left; font-weight: inherit; }
.tl-row { cursor: pointer; }
.tl-row:hover > * { background: var(--panel); }
.tl-row.is-sel > * { background: var(--panel-2); }
.tl-row.is-sel > :first-child { box-shadow: inset 3px 0 0 var(--accent); }
.tl-row-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 30px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--text);
  font: var(--bold) 15px/19px var(--font-body);
  text-align: left;
  cursor: pointer;
}
.tl-row-btn:hover span { text-decoration: underline; text-underline-offset: 3px; }
.tl-row-thumb { flex: none; width: 30px; height: 30px; border-radius: 6px; object-fit: cover; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.45); }
.tl-row-nothumb { flex: none; width: 30px; height: 30px; border-radius: 6px; background: var(--c); opacity: 0.25; }
.tl-table .chip { height: 24px; padding: 0 10px; font-size: 12.5px; }
.c-when { min-width: 220px; }
.c-len, .c-ses { white-space: nowrap; font-variant-numeric: tabular-nums; }
.c-dim { color: var(--dim); }
.tl-list-sort { display: none; }

@media (prefers-reduced-motion: no-preference) {
  .tl-tip { transition: opacity 0.12s; }
}

/* Two toolbar rows on mid-size screens: the title, view and count on top, the filters under them. */
@media (max-width: 1719px) {
  .tl-bar { display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: center; gap: 8px 18px; padding-bottom: 8px; }
  .tl-title { flex-direction: row; align-items: baseline; gap: 14px; grid-column: 1; }
  .tl-views { grid-column: 2; }
  .tl-count-wrap { grid-column: 3; justify-self: end; }
  .tl-filters { grid-column: 1 / -1; grid-row: 2; }
}

/* Narrower than this, the details panel slides over the chart instead of sitting beside it. */
@media (max-width: 1179px) {
  .tl-stage.has-details { grid-template-columns: minmax(0, 1fr); }
  .tl-details {
    position: fixed;
    top: var(--tl-top, 67px);
    right: 0;
    bottom: 0;
    z-index: 35;
    width: min(420px, 100%);
    border-width: 0 0 0 1px;
    border-radius: 0;
    box-shadow: -18px 0 44px rgba(0, 0, 0, 0.55);
  }
  .tl-range { display: none; }
}

@media (max-width: 1100px) {
  .tl-table .c-ses { display: none; }
}

/* Phones and small windows: the page scrolls normally, the chart gets a fixed height. */
@media (max-width: 759px), (max-height: 539px) {
  .tl-app { height: auto; min-height: 0; padding: 0 12px; }
  .tl-stage { display: block; padding-bottom: 0; }
  .tl-chart { height: max(420px, calc(100vh - var(--tl-top, 67px) - 24px)); height: max(420px, calc(100dvh - var(--tl-top, 67px) - 24px)); }
  .tl-list { overflow: visible; border: 0; background: none; }
}

@media (max-width: 759px) {
  .tl-bar { display: flex; flex-direction: column; align-items: stretch; gap: 12px; padding: 16px 0 12px; }
  .tl-title { flex-direction: column; gap: 4px; }
  .tl-h1 { font-size: 28px; line-height: 32px; }
  .tl-lede { font-size: 15px; line-height: 21px; white-space: normal; }
  .tl-views { display: flex; }
  .tl-views button { flex: 1; height: 40px; }
  .tl-filters { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
  .tl-filters .tl-seg { grid-column: 1 / -1; display: flex; }
  .tl-filters .tl-seg button { flex: 1; height: 40px; padding: 0 6px; font-size: 13px; gap: 5px; }
  .tl-pick { height: 44px; }
  .tl-pick select { flex: 1; width: 100%; height: 42px; font-size: 15px; }
  #tl-group-pick { grid-column: 1 / -1; }
  .tl-count-wrap { margin-left: 0; justify-content: space-between; }
  .tl-clear { min-height: 44px; }
  .tl-foot { padding: 8px 10px; }
  .tl-key { flex-basis: 100%; }
  .tl-zoom { margin-left: 0; flex-wrap: wrap; }
  .tl-btn { height: 44px; min-width: 44px; }
  .tl-icon { width: 44px; }
  .tl-keys { display: none; }
  .tl-details { width: 100%; border-left: 0; }
  .tl-d-close { width: 44px; height: 44px; }

  .tl-list-sort { display: inline-flex; margin: 0 0 12px; }
  .tl-table, .tl-table tbody { display: block; }
  .tl-table thead { display: none; }
  .tl-sec, .tl-yr { display: block; }
  .tl-sec th, .tl-yr th { display: block; padding-left: 2px; }
  .tl-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 12px;
    padding: 12px 2px;
    border-bottom: 1px dashed var(--line);
  }
  .tl-row > * { display: block; padding: 0; border: 0; }
  .tl-row > :empty { display: none; }
  .tl-row:hover > *, .tl-row.is-sel > * { background: none; }
  .tl-row.is-sel { background: var(--panel-2); }
  .tl-row > :first-child { flex-basis: 100%; box-shadow: none !important; }
  .tl-row .c-when { flex-basis: 100%; min-width: 0; color: var(--text); }
  .tl-row .c-host::before { content: "Run by "; color: var(--dim); }
  .tl-row .c-ses:not(:empty)::before { content: "Sessions: "; color: var(--dim); }
  .tl-row .c-fmt, .tl-row .c-len { color: var(--dim); font-size: 13.5px; }
  .tl-table .c-ses { display: block; }
  .tl-row-btn { min-height: 44px; font-size: 17px; }
}

@media (pointer: coarse) {
  .tl-btn { height: 44px; min-width: 44px; }
  .tl-icon { width: 44px; }
}