/* tradinglive.css — "Trading Live" (design/48): the topbar control #tool-tlive, the BOARD drawer #tl-board under the
   chart, the board itself (.tlb-*, drawn by tradinglive-board.js — shared verbatim with the /board/ pop-out, which
   links this file), its hover card, the gear and mute menus, and the FEED — the dock's "Live" tab (.tlf-*, drawn by
   tradinglive-feed.js).

   THE LOOK (the user's taste, binding): ONE neutral ink, the page's own tokens (--bg / --panel / --fg / --muted /
   --border, both themes from chart.css) plus four steps of that ink below; ▲ ▼ glyphs carry the direction with a
   MUTED up / down tint on the glyph only; no colour fills, no glow, no flashing, no animation; tabular numbers.

   THE GUTTER. The drawer is fixed under #stage, from the docked rail's gutter to the right gutter (the dock, the L4
   panel, the σ map), and #stage gives up its height — the additive-gutter idiom of --right-gutter / --vp-g. Every
   rule that moves the page is gated on html[data-tlb="1"], which tradinglive.js stamps only in a document where the
   drawer exists (never in the trainer, a /grid pane or split pane, a pop-out window, ?mobile=1 or the iOS app), so a
   page without it is pixel-identical and chart.css needs no edit. --tlb-g is 0 until body.tlb-open; --tlb-h is the
   drawer's height (tradinglive.js, on <html>). The #stage override restates chart.css's base height formula with one
   more term — keep the two in step (tests/web/tradinglive-host.test.mjs pins it against chart.css). A SPLIT tab's
   #split-area (split.css: fixed, bottom 0) stops above the drawer too, so the drawer sits under the WHOLE tab
   document's chart area, never inside a cell (split.js's ResizeObserver then re-measures cell 0). */
:root {
  --tlb-g: 0px;
  --tl-ink-2: rgba(209, 212, 220, 0.74);
  --tl-faint: rgba(209, 212, 220, 0.4);
  --tl-ring: rgba(209, 212, 220, 0.62);
  --tl-up: #63a89f;
  --tl-down: #c7716c;
  --tl-shadow: rgba(0, 0, 0, 0.45);
  /* the feed's activity meter: the Watch tab's level colours (watch.css .wl-act, statsbar.css --tbs-* in both themes),
     with Watch's fallbacks — named here so the .tlf rules carry no colour literal */
  --tl-act-1: var(--tbs-cool, #7f9cc9);
  --tl-act-3: var(--tbs-warm, #f0b429);
  --tl-act-4: var(--tbs-hot, #ff7043);
}
:root[data-theme="light"] {
  --tl-ink-2: rgba(19, 23, 34, 0.74);
  --tl-faint: rgba(19, 23, 34, 0.4);
  --tl-ring: rgba(19, 23, 34, 0.55);
  --tl-up: #2d8577;
  --tl-down: #bf4d4b;
  --tl-shadow: rgba(0, 0, 0, 0.16);
}
html[data-tlb="1"] body.tlb-open { --tlb-g: var(--tlb-h, 260px); }
html[data-tlb="1"] #stage { height: calc(100% - 48px - var(--tabs-h, 0px) - var(--tlb-g)); }
html[data-tlb="1"] .split-area { bottom: var(--tlb-g); }

/* ---- the topbar control: "● Trading Live 3" ---- */
#tool-tlive {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 30px;
  padding: 0 10px;
  margin: 0 2px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--fg);
  cursor: pointer;
  white-space: nowrap;
  font: 600 12px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
#tool-tlive:hover { background: var(--panel-2); }
#tool-tlive[aria-pressed="true"] { background: var(--panel-2); }
#tool-tlive:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
#tool-tlive .tl-dot { width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid var(--fg); background: transparent; box-sizing: border-box; }
#tool-tlive.on .tl-dot { background: var(--fg); }
#tool-tlive.off { color: var(--muted); }
#tool-tlive.off .tl-dot { border-color: var(--muted); }
#tool-tlive .tl-n {
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--fg); color: var(--bg); font-size: 11px; font-variant-numeric: tabular-nums;
}
#tool-tlive .tl-n[hidden] { display: none; }

/* ---- the drawer ---- */
#tl-board {
  position: fixed;
  left: var(--rail-gutter, 0px);
  right: var(--right-gutter, 0px);
  bottom: 0;
  height: var(--tlb-h, 260px);
  z-index: 25; /* over #stage's own layers (it never overlaps #stage); under the topbar menus and the tab frames (200) */
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--bg);
  color: var(--fg);
  border-top: 1px solid var(--border);
  font: 12px/1.35 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-variant-numeric: tabular-nums;
}
#tl-board[hidden] { display: none; }
#tl-board .tl-grip {
  position: absolute; left: 0; right: 0; top: -4px; height: 7px;
  cursor: row-resize; z-index: 3; touch-action: none;
}
#tl-board .tl-grip:hover, #tl-board .tl-grip.drag { background: var(--accent); opacity: 0.6; height: 2px; top: -1px; }
#tl-board .tl-head {
  flex: 0 0 32px; display: flex; align-items: center; gap: 10px; padding: 0 6px 0 10px; min-width: 0;
  background: var(--panel); border-bottom: 1px solid var(--border); white-space: nowrap;
}
#tl-board .tl-title { font-weight: 700; font-size: 12.5px; }
#tl-board .tl-desk { color: var(--muted); font-size: 11.5px; }
#tl-board .tl-health { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--muted); font-size: 11px; }
#tl-board .tl-health.live .tl-live { color: var(--fg); }
#tl-board .tl-health.err { color: var(--fg); }
#tl-board .tl-body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.tl-switch {
  display: inline-flex; align-items: center; gap: 6px; background: transparent; border: 0; padding: 0; cursor: pointer;
  color: var(--muted); font-size: 11px;
}
.tl-switch .trk { width: 26px; height: 14px; border-radius: 7px; border: 1px solid var(--muted); position: relative; box-sizing: border-box; }
.tl-switch .trk::after { content: ""; position: absolute; top: 2px; left: 2px; width: 8px; height: 8px; border-radius: 50%; background: var(--muted); }
.tl-switch[aria-checked="true"] { color: var(--fg); }
.tl-switch[aria-checked="true"] .trk { border-color: var(--fg); }
.tl-switch[aria-checked="true"] .trk::after { left: 14px; background: var(--fg); }
.tl-switch:disabled { opacity: 0.5; cursor: default; }
.tl-pill {
  background: var(--fg); color: var(--bg); border: 0; border-radius: 11px; padding: 2px 9px;
  font-size: 11px; font-weight: 600; cursor: pointer;
}
.tl-pill[hidden] { display: none; }
.tl-link {
  background: transparent; border: 0; padding: 0; color: var(--muted); cursor: pointer; font-size: 11.5px;
  text-decoration: underline; text-underline-offset: 2px;
}
.tl-link:hover { color: var(--fg); }
.tl-btn {
  background: transparent; border: 1px solid transparent; border-radius: 5px; padding: 2px 7px; color: var(--muted);
  cursor: pointer; font-size: 11.5px; white-space: nowrap;
}
.tl-btn:hover { color: var(--fg); background: var(--panel-2); border-color: var(--border); }
.tl-ic { width: 24px; height: 24px; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
.tl-ic svg { width: 14px; height: 14px; display: block; pointer-events: none; }
.tl-switch:focus-visible, .tl-pill:focus-visible, .tl-link:focus-visible, .tl-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* ---- the board (tradinglive-board.js; the /board/ pop-out links this file too) ---- */
.tlb { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; position: relative; font-variant-numeric: tabular-nums; }
.tlb-offmsg { flex: 0 0 auto; padding: 6px 12px; color: var(--fg); border-bottom: 1px solid var(--border); font-size: 12px; }
.tlb-offmsg[hidden] { display: none; }
.tlb.tlb-off .tlb-scroll, .tlb.tlb-off .tlb-ticker { opacity: 0.45; }
/* scroll-padding-top = the sticky header's TWO rows (2 × (19 px + a 1 px border)): scrollToCoin's scrollIntoView({block:
   'nearest'}) lifts a row ABOVE the view to the scroll box's top edge, i.e. UNDER that header ("N to look at"
   cycling upward landed on a row nobody could see). scrollIntoView honours the container's scroll padding. */
.tlb-scroll { flex: 1 1 auto; min-height: 0; overflow: auto; scroll-padding-top: 40px; }
.tlb-board { border-collapse: separate; border-spacing: 0; table-layout: fixed; width: max-content; font-size: 12px; }
.tlb-compact .tlb-board { font-size: 11.5px; }
.tlb-board th, .tlb-board td { height: 21px; padding: 0 6px; white-space: nowrap; text-align: left; overflow: hidden; }
.tlb-compact .tlb-board th, .tlb-compact .tlb-board td { padding: 0 4px; }
.tlb-board thead th {
  position: sticky; top: 0; z-index: 2; background: var(--bg); color: var(--muted); font-weight: 600; font-size: 11px;
  height: 19px; border-bottom: 1px solid var(--border);
}
/* the TWO-ROW header: row 1 = each family spanning its TF columns, row 2 = the TFs, stuck right under row 1 (its
   19 px + 1 px border); Coin and Agree span both rows */
.tlb-board thead tr.tlb-h2 th { top: 20px; font-weight: 500; font-size: 10.5px; }
.tlb-board thead th.tlb-fam { color: var(--tl-ink-2); }
.tlb-board thead th.tlb-coin, .tlb-board thead th.tlb-ag { vertical-align: bottom; padding-bottom: 3px; }
/* the coin column STICKS on horizontal scroll (all families on = 31 columns): the corner over both header rows and
   every row's name, opaque so the cells slide under it, a hairline on its right edge */
.tlb-board thead th.tlb-coin { left: 0; z-index: 4; padding-left: 12px; box-shadow: inset -1px 0 0 var(--border); }
.tlb-board tbody tr:hover { background: var(--hover); }
/* tbody-scoped: an unscoped `th.tlb-coin` (0,2,1) out-ranks `thead th` (0,1,2), and its `position` un-stuck the
   header's corner cell, which then scrolled away under the stuck labels with a row's coin name in its place */
.tlb-board tbody th.tlb-coin {
  position: sticky; left: 0; z-index: 1; background: var(--bg); box-shadow: inset -1px 0 0 var(--border);
  font-weight: 500; padding-left: 12px; text-overflow: ellipsis;
}
/* the row hover tint, over the sticky cell's opaque ground */
.tlb-board tbody tr:hover th.tlb-coin { background: linear-gradient(var(--hover), var(--hover)) var(--bg); }
.tlb-board tbody th.tlb-coin { cursor: pointer; }
.tlb-board tbody th.tlb-coin:hover .tlb-base { text-decoration: underline; text-underline-offset: 2px; }
.tlb-board tr.attn th.tlb-coin { font-weight: 700; }
.tlb-board tr.attn th.tlb-coin::before { content: ""; position: absolute; left: 0; top: 2px; bottom: 2px; width: 2px; background: var(--fg); }
/* muted: the coin cell's CONTENT dims, never the cell (a see-through sticky cell would show what scrolls under it) */
.tlb-board tr.muted td, .tlb-board tr.muted th.tlb-coin .tlb-name, .tlb-board tr.muted th.tlb-coin .tlb-tag { opacity: 0.55; }
/* a hairline before each family's first column (an inset shadow: no width, so tableWidth stays the real width) */
.tlb-board th.gs, .tlb-board td.gs { box-shadow: inset 1px 0 0 var(--border); }
.tlb-dex { color: var(--muted); font-weight: 400; }
.tlb-tag { margin-left: 6px; font-size: 9px; letter-spacing: 0.6px; color: var(--muted); font-weight: 400; }
.tlb-tag.top { border: 1px solid var(--border); border-radius: 3px; padding: 0 3px; }
.tlb-board .g { display: inline-block; width: 12px; text-align: center; font-size: 10px; line-height: 1; }
.tlb-board .g.up, .tlb-ticker .g.up, .tlb-pop .g.up { color: var(--tl-up); }
.tlb-board .g.dn, .tlb-ticker .g.dn, .tlb-pop .g.dn { color: var(--tl-down); }
.tlb-board .g.nd, .tlb-ticker .g.nd, .tlb-pop .g.nd { color: var(--tl-faint); }
.tlb-board .cell { cursor: pointer; position: relative; }
.tlb-board .cell .cin { opacity: var(--op, 1); display: inline-flex; align-items: baseline; gap: 4px; }
.tlb-board .cell .cw { color: var(--fg); }
.tlb-board .cell .ctf { color: var(--muted); font-size: 10px; }
.tlb-board .cell.unseen .cin { box-shadow: inset 0 0 0 1px var(--tl-ring); border-radius: 4px; padding: 0 4px; margin: 0 -4px; }
.tlb-board .cell.sel { background: var(--panel-2); }
.tlb-board .cell.stand .cin { opacity: 0.38; }
.tlb-board .cell.na { color: var(--tl-faint); cursor: default; }
.tlb-board .cell.na .cw { color: var(--tl-faint); }
.tlb-board .cell.empty { cursor: default; }
.tlb-board .agree { color: var(--tl-ink-2); }
.tlb-board .agree .k { margin-right: 6px; }
.tlb-board .agree .k[hidden] { display: none; }
.tlb-ticker {
  flex: 0 0 auto; height: 24px; display: flex; align-items: center; gap: 14px; padding: 0 10px; overflow: hidden;
  border-top: 1px solid var(--border); color: var(--tl-ink-2); font-size: 11.5px; white-space: nowrap;
}
.tlb-ticker[hidden] { display: none; }
.tlb-ticker .tk { cursor: pointer; display: inline-flex; align-items: baseline; gap: 4px; }
.tlb-ticker .tk[hidden] { display: none; }
.tlb-ticker .tk:hover { color: var(--fg); }
.tlb-ticker .tm { color: var(--muted); }
.tlb-ticker .g { display: inline-block; width: 10px; text-align: center; font-size: 10px; }

/* the hover card (one fixed element on the document) */
.tlb-pop {
  position: fixed; z-index: 70; max-width: 460px; min-width: 260px; background: var(--panel); color: var(--fg);
  border: 1px solid var(--border); border-radius: 6px; box-shadow: 0 8px 22px var(--tl-shadow); padding: 6px 0;
  font: 12px/1.35 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-variant-numeric: tabular-nums; pointer-events: none;
}
.tlb-pop[hidden] { display: none; }
.tlb-pop-h { padding: 0 10px 4px; color: var(--muted); font-size: 11px; }
.tlb-pop-r { position: relative; display: flex; align-items: baseline; gap: 6px; padding: 2px 10px 2px 16px; white-space: nowrap; }
.tlb-pop-r .dot { position: absolute; left: 6px; top: 50%; width: 5px; height: 5px; margin-top: -2.5px; border-radius: 50%; }
.tlb-pop-r.unseen .dot { background: var(--fg); }
.tlb-pop-r .tf { color: var(--muted); font-size: 11px; min-width: 24px; }
.tlb-pop-r .tx { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.tlb-pop-r .tx-n { color: var(--fg); }
.tlb-pop-r .tx-c { color: var(--tl-ink-2); font-size: 11px; white-space: normal; }
.tlb-pop-r .px { color: var(--muted); font-size: 11px; margin-left: 6px; }
.tlb-pop-empty { color: var(--muted); }

/* ---- the gear + mute menus ---- */
.tl-menu {
  position: fixed; z-index: 72; min-width: 220px; max-width: 320px; background: var(--panel); color: var(--fg);
  border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 10px 30px var(--tl-shadow); padding: 6px;
  font: 12px/1.35 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
.tl-menu[hidden] { display: none; }
.tl-menu .tl-mh { color: var(--muted); font-size: 10.5px; font-weight: 600; letter-spacing: 0.5px; text-transform: uppercase; padding: 6px 6px 3px; }
.tl-menu label.tl-mi, .tl-menu button.tl-mi {
  display: flex; align-items: center; gap: 8px; width: 100%; box-sizing: border-box; padding: 4px 6px; border-radius: 4px;
  background: transparent; border: 0; color: var(--fg); font: inherit; text-align: left; cursor: pointer;
}
.tl-menu .tl-mi:hover { background: var(--hover); }
.tl-menu .tl-mi input[type="checkbox"] { margin: 0; }
.tl-menu .tl-mrow { display: flex; flex-wrap: wrap; gap: 2px 4px; padding: 0 2px; }
.tl-menu .tl-mrow label.tl-mi { width: auto; }
.tl-menu .tl-num { width: 56px; padding: 2px 4px; background: var(--bg); color: var(--fg); border: 1px solid var(--border); border-radius: 4px; font: inherit; }
.tl-menu .tl-mnote { color: var(--muted); font-size: 11px; padding: 2px 6px 4px; white-space: normal; }
.tl-menu .tl-mnote[hidden] { display: none; }
.tl-menu .tl-mseg { display: flex; gap: 4px; padding: 2px 6px 4px; }
.tl-menu .tl-mseg button { flex: 1 1 0; }
/* the ring's choices: a segmented row (each a hairline box); the pressed one reads as chosen — ink on the panel
   step, never a colour fill */
.tl-menu .tl-ring button { border-color: var(--border); border-radius: 4px; }
.tl-menu .tl-ring button[aria-pressed="true"] { color: var(--fg); background: var(--panel-2); border-color: var(--muted); }
.tl-menu .tl-mlab { color: var(--muted); font-size: 11px; padding: 4px 8px 0; }
.tl-menu .tl-mseg .tl-test { flex: 0 0 auto; border-color: var(--border); color: var(--fg); padding: 2px 12px; }
.tl-menu .tl-mdiv { height: 1px; background: var(--border); margin: 4px 2px; }
/* ---- the FEED: the dock's "Live" tab (.tlf-*, drawn by tradinglive-feed.js) ----
   What rang, newest arrival first: two header lines, then NEW (group headers + rows), UPDATED ("no ring"), the
   "SEEN · BEFORE" divider and EARLIER, dimmed. The board's look: one neutral ink, the glyph alone tinted, a 2 px ink
   mark on an UNSEEN row (the board's ring idiom — an inset shadow, so it takes no width and nothing shifts), no
   fills, no glow, no animation, 11-12 px tabular type. It must fit the dock at its 240 px minimum: no fixed width
   anywhere, every flex child min-width 0, line 1 and the headers end in an ellipsis, lines 2 and 3 wrap, and the
   list never scrolls sideways. */
.tlf {
  container: tlf / inline-size;
  flex: 1 1 auto; display: flex; flex-direction: column; height: 100%; min-height: 0; min-width: 0;
  background: var(--bg); color: var(--fg); font-size: 12px; line-height: 1.3; font-variant-numeric: tabular-nums;
}
.tlf-head { flex: 0 0 auto; padding: 5px 10px 5px; background: var(--panel); border-bottom: 1px solid var(--border); min-width: 0; }
.tlf-h1 { display: flex; align-items: baseline; gap: 8px; min-width: 0; white-space: nowrap; }
.tlf-count { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--muted); font-size: 12px; }
.tlf-count[hidden] { display: none; }
.tlf-count .tlf-lead { font-weight: 600; color: var(--muted); }
.tlf-count.has-new .tlf-lead { font-weight: 700; color: var(--fg); }
.tlf-h2 { margin-top: 2px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: 11px; }
.tlf-h2[hidden] { display: none; }
.tlf-link {
  flex: 0 0 auto; background: transparent; border: 0; padding: 0; color: var(--muted); cursor: pointer; font: inherit;
  font-size: 11.5px; text-decoration: underline; text-underline-offset: 2px;
}
.tlf-link:hover { color: var(--fg); }
.tlf-link[hidden] { display: none; }
.tlf-tog {
  flex: 0 0 auto; background: transparent; border: 1px solid var(--border); border-radius: 5px; padding: 1px 7px;
  color: var(--muted); cursor: pointer; font: inherit; font-size: 11.5px;
}
.tlf-tog:hover { color: var(--fg); }
.tlf-tog[aria-pressed="true"] { color: var(--fg); background: var(--panel-2); border-color: var(--muted); }
.tlf-note {
  flex: 0 0 auto; display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 10px; padding: 8px 10px;
  border-bottom: 1px solid var(--border); color: var(--fg); font-size: 12px; min-width: 0; overflow-wrap: anywhere;
}
.tlf-note[hidden] { display: none; }
.tlf-on {
  flex: 0 0 auto; background: transparent; border: 1px solid var(--muted); border-radius: 5px; padding: 1px 9px;
  color: var(--fg); cursor: pointer; font: inherit; font-size: 11.5px;
}
.tlf-on:hover { background: var(--panel-2); }
.tlf-on[hidden] { display: none; }
.tlf-list { flex: 1 1 auto; min-height: 0; min-width: 0; overflow-x: hidden; overflow-y: auto; }
.tlf.tlf-off .tlf-list { opacity: 0.45; }
.tlf-gh, .tlf-sh {
  padding: 5px 10px 2px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  background: var(--panel); border-bottom: 1px solid var(--border); color: var(--muted); font-size: 10.5px; letter-spacing: 0.03em;
}
.tlf-sh { color: var(--tl-ink-2); font-weight: 600; }
.tlf-div {
  display: flex; align-items: center; gap: 8px; padding: 5px 10px; min-width: 0; border-bottom: 1px solid var(--border);
  color: var(--muted); font-size: 10.5px; letter-spacing: 0.06em; white-space: nowrap;
}
.tlf-div::before, .tlf-div::after { content: ""; flex: 1 1 0; min-width: 8px; border-top: 1px solid var(--border); }
.tlf-div-t { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.tlf-row {
  display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 1px; padding: 5px 10px 6px; min-width: 0;
  border-bottom: 1px solid var(--border); cursor: pointer; box-shadow: inset 2px 0 0 transparent;
}
.tlf-row:hover { background: var(--hover); }
.tlf-row.unseen { box-shadow: inset 2px 0 0 var(--fg); }
.tlf-row.dim { opacity: 0.55; }
.tlf-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.tlf-l1 { display: flex; align-items: baseline; gap: 6px; min-width: 0; white-space: nowrap; }
.tlf-coin { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.tlf-base { font-weight: 600; }
.tlf-dex { margin-left: 3px; color: var(--muted); font-size: 10.5px; }
.tlf-dex[hidden] { display: none; }
.tlf-tf { flex: 0 0 auto; color: var(--tl-ink-2); }
.tlf-when { flex: 0 0 auto; margin-left: auto; color: var(--muted); font-size: 11px; }
.tlf-l2 { min-width: 0; color: var(--tl-ink-2); font-size: 11.5px; overflow-wrap: anywhere; }
.tlf-oc { color: var(--fg); }
.tlf-oc[hidden] { display: none; }
.tlf-l3 { min-width: 0; color: var(--muted); font-size: 11px; overflow-wrap: anywhere; }
.tlf-l3[hidden] { display: none; }
.tlf .g { display: inline-block; width: 11px; flex: 0 0 auto; text-align: center; font-size: 10px; line-height: 1; }
.tlf .g.up { color: var(--tl-up); }
.tlf .g.dn { color: var(--tl-down); }
.tlf .g.nd { color: var(--tl-faint); }
.tlf-more {
  display: block; width: 100%; box-sizing: border-box; padding: 8px 10px; background: transparent; border: 0;
  border-bottom: 1px solid var(--border); color: var(--muted); cursor: pointer; font: inherit; font-size: 11.5px; text-align: left;
}
.tlf-more:hover { color: var(--fg); }
.tlf-empty { padding: 10px; color: var(--muted); font-size: 11.5px; }
.tlf-link:focus-visible, .tlf-tog:focus-visible, .tlf-on:focus-visible, .tlf-more:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
/* ---- ACTIVITY + THE FILTER (option A, 2026-10-11) ----
   THE METER: the Watch tab's 5-step meter (watch.css .wl-m), the SAME look and colours on the feed's 11-12 px type —
   five bars 3 px wide, 3 to 11 px tall (Watch's 4..12 one step down: its proportions kept), lit in dead --muted ·
   quiet --tbs-cool · normal --fg · elevated --tbs-warm · hot --tbs-hot, unlit a faint --muted. The slot is a FIXED
   width, so a coin with no reading is an empty slot (never a grey bar) and the TF column does not move; faded = the
   coin's newest 5m bar is over 20 min old. No read held at all (.tlf-noact): no slot, the row as it was.
   THE FILTER ROW sits between the header and the list, the header's chrome (one ink, the --panel ground, 11.5 px, a
   1 px border button; an active filter gets the --tl-ring border); each label + its button is one group and the row
   WRAPS, never scrolls sideways (the dock's 240 px). THE MENUS reuse the .tl-menu look (its border, radius, shadow and
   items) but sit ABSOLUTE inside the list's box (.tlf-body), so the dock never clips them: a max-height and their own
   scroll, placed by CSS (never measured), as wide as the dock allows. */
.tlf-act { flex: 0 0 auto; display: inline-flex; align-items: flex-end; align-self: center; width: 19px; height: 11px; }
.tlf-act[hidden] { display: none; }
.tlf-m { display: inline-flex; align-items: flex-end; gap: 1px; height: 11px; visibility: hidden; }
.tlf-m i { display: block; width: 3px; border-radius: 1px 1px 0 0; background: color-mix(in srgb, var(--muted) 18%, transparent); }
.tlf-m i:nth-child(1) { height: 3px; }
.tlf-m i:nth-child(2) { height: 5px; }
.tlf-m i:nth-child(3) { height: 7px; }
.tlf-m i:nth-child(4) { height: 9px; }
.tlf-m i:nth-child(5) { height: 11px; }
.tlf-act.a0 { --tlf-ac: var(--muted); }
.tlf-act.a1 { --tlf-ac: var(--tl-act-1); }
.tlf-act.a2 { --tlf-ac: var(--fg); }
.tlf-act.a3 { --tlf-ac: var(--tl-act-3); }
.tlf-act.a4 { --tlf-ac: var(--tl-act-4); }
.tlf-act.a0 .tlf-m,
.tlf-act.a1 .tlf-m,
.tlf-act.a2 .tlf-m,
.tlf-act.a3 .tlf-m,
.tlf-act.a4 .tlf-m { visibility: visible; }
.tlf-act.a0 .tlf-m i:nth-child(-n + 1),
.tlf-act.a1 .tlf-m i:nth-child(-n + 2),
.tlf-act.a2 .tlf-m i:nth-child(-n + 3),
.tlf-act.a3 .tlf-m i:nth-child(-n + 4),
.tlf-act.a4 .tlf-m i { background: var(--tlf-ac); }
.tlf-act.dim .tlf-m { opacity: 0.45; }
.tlf.tlf-noact .tlf-row .tlf-act { display: none; }
.tlf-flt {
  flex: 0 0 auto; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 4px 10px 5px; min-width: 0;
  background: var(--panel); border-bottom: 1px solid var(--border); color: var(--muted); font-size: 11.5px;
}
.tlf-flt[hidden] { display: none; }
.tlf-fg { display: inline-flex; align-items: center; gap: 5px; min-width: 0; white-space: nowrap; }
.tlf-fg[hidden] { display: none; }
.tlf-dd {
  display: inline-flex; align-items: center; gap: 4px; padding: 1px 7px; background: transparent; border: 1px solid var(--border);
  border-radius: 5px; color: var(--fg); cursor: pointer; font: inherit; font-size: 11.5px; white-space: nowrap;
}
.tlf-dd:hover { background: var(--panel-2); }
.tlf-dd.set { border-color: var(--tl-ring); }
.tlf-dd[aria-expanded="true"] { background: var(--panel-2); border-color: var(--muted); }
.tlf-cv { color: var(--muted); font-size: 10px; }
.tlf-hid { color: var(--muted); font-size: 11px; }
.tlf-sep { color: var(--muted); font-size: 11px; }
.tlf-body { position: relative; flex: 1 1 auto; min-height: 0; min-width: 0; display: flex; flex-direction: column; }
.tlf .tlf-menu {
  position: absolute; z-index: 5; top: 2px; left: 6px; right: 6px; min-width: 0; max-width: 22em;
  max-height: calc(100% - 8px); overflow-x: hidden; overflow-y: auto; padding: 5px;
}
.tlf .tlf-menu[hidden] { display: none; }
.tlf .tlf-mi { white-space: nowrap; }
.tlf .tlf-mi[disabled] { cursor: default; opacity: 0.5; }
.tlf .tlf-mi[disabled]:hover { background: transparent; }
.tlf-ck { flex: 0 0 auto; width: 12px; color: var(--fg); }
.tlf-mw { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.tlf-mi[aria-checked="true"] .tlf-mw { font-weight: 650; }
.tlf-mn { flex: 0 0 auto; margin-left: auto; color: var(--muted); font-size: 11px; }
.tlf-mh { display: flex; align-items: baseline; gap: 10px; padding: 3px 6px 6px; margin-bottom: 4px; border-bottom: 1px solid var(--border); }
.tlf-mhint { margin-left: auto; color: var(--muted); font-size: 11px; }
.tlf .tlf-mnote { padding: 6px 6px 2px; font-size: 10.5px; }
.tlf-dd:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.tlf .tlf-mi:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
/* a dock near its 240 px minimum: the header's spacing gives way so "N new since HH:MM" keeps its time; the filter
   row's gaps shrink (it wraps whatever happens) */
@container tlf (max-width: 270px) {
  .tlf-head { padding-inline: 8px; }
  .tlf-h1 { gap: 5px; }
  .tlf-count { font-size: 11.5px; }
  .tlf-link, .tlf-tog { font-size: 11px; }
  .tlf-tog { padding: 1px 4px; }
  .tlf-flt { padding-inline: 8px; gap: 3px 6px; }
  .tlf-dd { padding: 1px 5px; font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  #tl-board *, .tlb-pop, .tl-menu, .tlf * { transition: none !important; animation: none !important; }
}