/* /futures-term-structure and /futures-term-structure/<COIN> (templates/term_structure*.html, main.ts, T-209).
   Loaded after seo.css (and correlation.css on the hub, for the sort arrows); venue colours are the registry's
   --v-<venue> tokens, with site-token fallbacks. */
.ts { --ts-binance: var(--v-binance, var(--warn)); --ts-bybit: var(--v-bybit, var(--teal)); }
.ts .panel-h { gap: 8px; flex-wrap: wrap; }
.ts-legend { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0 0 8px; padding: 0; list-style: none; font-size: 12.5px; color: var(--muted); }
.ts-legend i { display: inline-block; width: 16px; height: 0; border-top: 2.5px solid currentColor; margin-right: 6px; vertical-align: middle; }
.ts-legend .ts-coin i { border-top-style: dashed; }
.ts-legend .ts-binance i { color: var(--ts-binance); }
.ts-legend .ts-bybit i { color: var(--ts-bybit); }
.ts-legend .ts-fund i { width: 8px; height: 8px; border: 0; background: var(--text); transform: rotate(45deg); margin-right: 8px; }
.ts-chart { display: block; width: 100%; height: auto; max-height: 340px; }
.ts-chart .grid { stroke: var(--line); stroke-width: 1; }
.ts-chart .grid.zero { stroke: var(--line2); stroke-width: 1.5; }
.ts-chart .tick { stroke: var(--line2); }
.ts-chart text { fill: var(--muted); font: 11px Inter, sans-serif; font-variant-numeric: tabular-nums; }
.ts-line { fill: none; stroke-width: 1.8; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.ts-line.ts-coin { stroke-dasharray: 5 4; }
.ts-line.ts-binance, .ts-dot.ts-binance { stroke: var(--ts-binance); }
.ts-line.ts-bybit, .ts-dot.ts-bybit { stroke: var(--ts-bybit); }
.ts-dot { fill: var(--panel); stroke-width: 2; }
.ts-fund { stroke: var(--panel); stroke-width: 1; }
.ts-fund.ts-binance { fill: var(--ts-binance); }
.ts-fund.ts-bybit { fill: var(--ts-bybit); }
.ts-table th[data-sort] { cursor: pointer; user-select: none; white-space: nowrap; }
.ts-table th[data-sort]:hover { color: var(--text); }
.ts-table th[aria-sort="descending"]::after { content: " ▼"; }
.ts-table th[aria-sort="ascending"]::after { content: " ▲"; }
.ts-table td { white-space: nowrap; }
.ts-struct { font-size: 12px; padding: 1px 6px; border-radius: 4px; background: var(--panel2); color: var(--muted); }
.ts-struct.ts-contango { color: var(--up); background: var(--up-bg); }
.ts-struct.ts-backwardation { color: var(--down); background: var(--down-bg); }
.ts-near td { color: var(--dim); }
.ts-flag { color: var(--warn); font-size: 10.5px; font-weight: 500; }
.ts-perp td { background: var(--panel2); }
.ts-down { border-left: 3px solid var(--warn); padding-left: 10px; }