/**
 * The run-board table's furniture — one sheet, three consoles.
 *
 * Dispatch, Journeys and the Rolodex all draw the same table and all dressed
 * it separately: a hundred identical lines in three files, so a change to the
 * pop-up had to be made three times and was only ever made twice. It lives
 * here now. Each console keeps only what is genuinely its own — where its
 * panel hangs from, how its own header row reads — and loads this first.
 *
 * Two things are new rather than moved:
 *
 *  - The pop-up has room. It was 340px wide with a 220px column list, which
 *    made the desk scroll a list of thirty facts through a slot. It is now
 *    as wide as a panel can sensibly be, the facts stand in columns, and the
 *    viewport caps it so a laptop never has it running off the edge.
 *
 *  - A header can be dragged. The affordances for that — the lift, the line
 *    that says where it lands — are below.
 */

.tvbar{ display:flex; align-items:center; gap:10px; margin:10px 0; }
.tvbar #tv-q{ flex:1; min-width:0; max-width:440px; height:34px; padding:0 12px;
  border:1px solid var(--line2); border-radius:9px; background:var(--panel); color:inherit; font:inherit; font-size:12.5px; }
.tvbtn{ height:34px; padding:0 14px; border:1px solid var(--line2); border-radius:9px;
  background:var(--panel); color:inherit; font:inherit; font-size:12px; cursor:pointer; }
.tvbtn:hover{ border-color:var(--blx-acc-mid, #b58a1a); color:var(--blx-acc-mid, #b58a1a); }
.tvbtn.on{ border-color:var(--blx-acc-mid, #b58a1a); color:var(--blx-acc-deep, #8a6a12); background:rgba(var(--blx-acc-mid-rgb, 181,138,26),.1); font-weight:700; }
.tvpickwrap{ position:relative; }

/* The pop-up. Width is a preference the viewport is allowed to overrule —
   never the other way round, so nothing ever hangs off a small screen. */
.tvpick{ position:absolute; left:0; top:calc(100% + 8px); z-index:80;
  width:min(360px, calc(100vw - 24px));
  display:flex; flex-direction:column; padding:0; border-radius:14px;
  background:var(--panel); border:1px solid var(--line2);
  box-shadow:0 24px 60px -12px rgba(20,18,12,.35), 0 0 0 1px rgba(var(--blx-acc-mid-rgb, 181,138,26),.06);
  max-height:min(78vh, 760px); overflow:hidden; }
.tvpick[hidden]{ display:none !important; }
.tvpick-head{ display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:12px 16px; border-bottom:1px solid var(--line2); flex:none; }
.tvpick-head b{ font-size:12.5px; font-weight:700; letter-spacing:.02em; }
.tvpick-head .tvbtn{ height:30px; padding:0 12px; font-size:11.5px; }
.tvpick-head .tvbtn.gold{ border-color:var(--blx-acc-mid, #b58a1a); color:var(--blx-acc-mid, #b58a1a); }
.tvpick-head .tvbtn.gold:hover{ background:rgba(var(--blx-acc-mid-rgb, 181,138,26),.1); }
.tvpick-sec{ display:flex; align-items:baseline; gap:8px; padding:12px 16px 4px;
  font-size:10px; letter-spacing:.1em; text-transform:uppercase; font-weight:700;
  color:var(--muted,#8b8f99); flex:none; }
.tvpick-sec i{ font-style:normal; font-weight:400; letter-spacing:0; text-transform:none; font-size:10.5px; }
.tvpick-rows{ overflow:auto; padding:4px 8px 12px; }
.tvpick-row{ display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:5px 8px; border-radius:8px; }
.tvpick-row:hover{ background:rgba(var(--blx-acc-mid-rgb, 181,138,26),.06); }
.tvpick-row .tvpl{ font-size:12.5px; }
.tvchips{ display:inline-flex; gap:5px; }
.tvchip{ font:inherit; font-size:10px; letter-spacing:.04em; text-transform:uppercase;
  padding:3px 9px; border-radius:999px; border:1px solid var(--line2);
  background:transparent; color:var(--muted,#8b8f99); cursor:pointer; }
.tvchip:hover{ border-color:var(--blx-acc-mid, #b58a1a); color:var(--blx-acc-mid, #b58a1a); }
.tvchip.on{ border-color:var(--blx-acc-mid, #b58a1a); background:rgba(var(--blx-acc-mid-rgb, 181,138,26),.12); color:var(--blx-acc-deep, #8a6a12); font-weight:700; }

/* "Set up your view" is a panel, not a slot. Every fact the board knows
   stands in its own row, several rows abreast, so a catalogue of thirty is
   read rather than scrolled past. The viewport still has the last word. */
.tvpick.tvsetup{ width:min(640px, calc(100vw - 24px)); }
.tvsetup .tvpick-rows{ display:grid; gap:1px 10px;
  grid-template-columns:repeat(auto-fill, minmax(258px, 1fr)); align-content:start; }
.tvsetup .tvpick-row{ min-width:0; }
.tvsetup .tvpick-row .tvpl{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tvsetup .tvchips{ flex:none; }

/* the chosen columns, in hand-set order */
.tvorder{ padding:2px 8px 8px; overflow:auto; max-height:min(42vh, 340px); flex:none; }
.tvsetup .tvorder{ display:grid; gap:1px 10px;
  grid-template-columns:repeat(auto-fill, minmax(258px, 1fr)); align-content:start; }
.tvord{ display:flex; align-items:center; gap:9px; padding:6px 8px; border-radius:8px;
  cursor:grab; border:1px solid transparent; min-width:0; }
.tvord:hover{ background:rgba(var(--blx-acc-mid-rgb, 181,138,26),.06); }
.tvord.drag{ opacity:.45; border-color:var(--blx-acc-mid, #b58a1a); background:rgba(var(--blx-acc-mid-rgb, 181,138,26),.1); }
.tvord .grip{ color:var(--muted,#8b8f99); font-size:12px; cursor:grab; }
.tvord .tvpl{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font-size:12.5px; font-weight:600; }
.tvord-x{ border:0; background:none; color:var(--muted,#8b8f99); font-size:14px;
  cursor:pointer; padding:0 4px; border-radius:6px; }
.tvord-x:hover{ color:#b45050; }

/* the per-fact filter buttons and their value boxes */
.tvfbtn.on{ border-color:var(--blx-acc-mid, #b58a1a); color:var(--blx-acc-deep, #8a6a12); background:rgba(var(--blx-acc-mid-rgb, 181,138,26),.1); font-weight:700; }
.tvvals{ width:min(340px, calc(100vw - 24px)); }
.tvvals .tvpick-rows{ max-height:min(62vh, 560px); }
.tvval{ display:flex; align-items:center; gap:9px; padding:5px 8px; border-radius:8px;
  font-size:12.5px; cursor:pointer; }
.tvval:hover{ background:rgba(var(--blx-acc-mid-rgb, 181,138,26),.06); }
.tvval input{ margin:0; accent-color:var(--blx-acc-mid, #b58a1a); }

/* search inside the pickers */
.tvfindrow{ padding:8px 12px 2px; flex:none; }
.tvfind{ width:100%; height:30px; padding:0 10px; font:inherit; font-size:12px;
  border:1px solid var(--line2); border-radius:8px; background:var(--panel,#fff); color:inherit; outline:none; }
.tvfind:focus{ border-color:var(--blx-acc-mid, #b58a1a); box-shadow:0 0 0 2px rgba(var(--blx-acc-mid-rgb, 181,138,26),.14); }
.tvnone{ padding:8px 10px 10px; font-size:12px; color:var(--muted,#8b8f99); }

/* ---- moving a column by its own header ----------------------------------
 *
 * The header is still a sort button first: a press that goes nowhere sorts,
 * exactly as it always did. Travel a few pixels and it becomes a handle —
 * the header lifts under the hand and a gold line stands in the gap it would
 * drop into. touch-action keeps a trackpad or a tablet from scrolling the
 * table out from under a drag that has already started.
 */
.tvh-host{ position:relative; }
.tvh-move{ cursor:grab; touch-action:none; }
.tvh-move:active{ cursor:grabbing; }
.tvh-move:focus-visible{ outline:2px solid var(--blx-acc-mid, #b58a1a); outline-offset:2px; border-radius:4px; }
/* A column that is not the desk's to move says so by not offering. */
.tvh-fixed{ cursor:pointer; }
.tvh-dragging{ user-select:none; }
.tvh-dragging .tvh-move:not(.tvh-lift){ opacity:.55; transition:opacity .12s ease; }
/* The header in the hand: it keeps its own colour but rides above the row on
   a small cushion of the panel's own paper, so it reads as picked up rather
   than merely focused. The spread stands in for padding — real padding would
   shift the grid the moment the drag began. */
.tvh-lift{ position:relative; z-index:3; opacity:1 !important;
  color:var(--blx-acc-mid, #b58a1a) !important;
  box-shadow:0 0 0 6px var(--panel,#fff), 0 0 0 7px rgba(var(--blx-acc-mid-rgb, 181,138,26),.35),
    0 10px 22px -10px rgba(20,18,12,.55); }
.tvh-drop{ position:absolute; top:0; bottom:0; width:2px; margin:-2px 0; border-radius:2px;
  background:var(--blx-acc-mid, #b58a1a); box-shadow:0 0 0 2px rgba(var(--blx-acc-mid-rgb, 181,138,26),.18);
  pointer-events:none; z-index:4; }
@media (prefers-reduced-motion:reduce){
  .tvh-dragging .tvh-move:not(.tvh-lift){ transition:none; }
}

/* Where a moved column landed, said out loud for anyone not watching. */
.blxtv-crier{ position:fixed; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0; }

/* ---- Set up your view: a small window, not a menu ----------------------
 * Opens beside the button, drags anywhere by its head, stays open while the
 * table repaints beneath it. One list: the facts on the board in order,
 * each with its filter switch and width; the rest below, a tap from joining.
 */
#blxtv-setup{ position:fixed; z-index:99990; width:min(520px, calc(100vw - 16px)); display:flex; flex-direction:column;
  background:var(--panel, #fff); color:var(--text, #3f4451); border:1px solid var(--line2, #cbd2da); border-radius:16px;
  box-shadow:0 30px 70px -18px rgba(20,18,12,.45), 0 0 0 1px rgba(var(--blx-acc-mid-rgb, 181,138,26),.08);
  font-size:13px; overflow:hidden; }
#blxtv-setup[hidden]{ display:none !important; }
#blxtv-setup *{ box-sizing:border-box; }
.tvs-head{ display:flex; align-items:center; gap:8px; padding:10px 10px 10px 16px; border-bottom:1px solid var(--line2, #cbd2da); flex:none;
  background:linear-gradient(180deg, rgba(var(--blx-acc-mid-rgb, 181,138,26),.07), transparent); }
.tvs-grab{ flex:1; display:flex; align-items:baseline; gap:8px; min-width:0; cursor:grab; user-select:none; touch-action:none; }
.tvs-grab:active{ cursor:grabbing; }
.tvs-grab b{ font-size:13px; font-weight:700; letter-spacing:.01em; color:var(--heading, var(--head, #111827)); }
.tvs-grab i{ font-style:normal; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted, #6b7280); }
.tvs-mini{ height:28px; padding:0 11px; border:1px solid var(--line2, #cbd2da); border-radius:8px; background:transparent; color:inherit;
  font:inherit; font-size:11.5px; font-weight:600; cursor:pointer; white-space:nowrap; }
.tvs-mini:hover{ border-color:var(--blx-acc-mid, #b58a1a); color:var(--blx-acc-mid, #b58a1a); }
.tvs-mini.gold{ border-color:var(--blx-acc-mid, #b58a1a); color:var(--blx-acc-deep, #8a6a12); }
.tvs-mini.gold:hover{ background:rgba(var(--blx-acc-mid-rgb, 181,138,26),.1); }
.tvs-mini:disabled{ opacity:.6; cursor:default; }
.tvs-close{ width:28px; height:28px; border:0; border-radius:8px; background:transparent; color:var(--muted, #6b7280); font-size:20px; line-height:1; cursor:pointer; }
.tvs-close:hover{ background:rgba(var(--blx-acc-mid-rgb, 181,138,26),.1); color:var(--heading, var(--head, #111827)); }
.tvs-findrow{ padding:10px 12px 4px; flex:none; }
.tvs-find{ width:100%; height:32px; padding:0 12px; font:inherit; font-size:12.5px; border:1px solid var(--line2, #cbd2da); border-radius:9px;
  background:var(--panel, #fff); color:inherit; outline:none; }
.tvs-find:focus{ border-color:var(--blx-acc-mid, #b58a1a); box-shadow:0 0 0 3px rgba(var(--blx-acc-mid-rgb, 181,138,26),.12); }
.tvs-body{ overflow:auto; padding:0 8px 8px; flex:1 1 auto; min-height:0; }
.tvs-sec{ display:flex; align-items:baseline; gap:8px; padding:12px 8px 4px; font-size:10px; letter-spacing:.12em; text-transform:uppercase;
  font-weight:800; color:var(--muted, #6b7280); }
.tvs-sec i{ font-style:normal; font-weight:400; letter-spacing:0; text-transform:none; font-size:10.5px; }
.tvs-list{ display:flex; flex-direction:column; gap:1px; }
.tvs-row{ display:flex; align-items:center; gap:8px; padding:5px 8px; border-radius:9px; min-width:0; border:1px solid transparent; }
.tvs-row:hover{ background:rgba(var(--blx-acc-mid-rgb, 181,138,26),.06); }
.tvs-row.drag{ opacity:.5; border-color:var(--blx-acc-mid, #b58a1a); }
.tvs-row.off{ color:var(--muted, #6b7280); }
.tvs-grip{ color:var(--muted, #6b7280); cursor:grab; font-size:13px; width:16px; text-align:center; flex:none; }
.tvs-grip:active{ cursor:grabbing; }
.tvs-add{ width:22px; height:22px; border:1px solid var(--line2, #cbd2da); border-radius:6px; background:transparent; color:var(--muted, #6b7280);
  font:inherit; font-size:14px; line-height:1; cursor:pointer; flex:none; }
.tvs-add:hover{ border-color:var(--blx-acc-mid, #b58a1a); color:var(--blx-acc-mid, #b58a1a); }
.tvs-l{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12.5px; font-weight:600; }
.tvs-row.off .tvs-l{ font-weight:500; }
/* the filter switch */
.tvs-sw{ display:inline-flex; align-items:center; gap:6px; cursor:pointer; flex:none; font-size:10.5px; letter-spacing:.04em; text-transform:uppercase; color:var(--muted, #6b7280); }
.tvs-sw input{ position:absolute; opacity:0; width:0; height:0; }
.tvs-sw i{ width:28px; height:16px; border-radius:999px; background:var(--line2, #cbd2da); position:relative; transition:background .15s; }
.tvs-sw i::after{ content:''; position:absolute; top:2px; left:2px; width:12px; height:12px; border-radius:50%; background:#fff; transition:left .15s; }
.tvs-sw.on i{ background:var(--blx-acc-mid, #b58a1a); }
.tvs-sw.on i::after{ left:14px; }
.tvs-sw.on{ color:var(--blx-acc-deep, #8a6a12); font-weight:700; }
.tvs-w{ display:inline-flex; align-items:center; gap:3px; flex:none; }
.tvs-w input{ width:58px; height:26px; padding:0 6px; font:inherit; font-size:12px; border:1px solid var(--line2, #cbd2da); border-radius:7px;
  background:var(--panel, #fff); color:inherit; text-align:right; -moz-appearance:textfield; }
.tvs-w input::-webkit-outer-spin-button, .tvs-w input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.tvs-w input:focus{ outline:none; border-color:var(--blx-acc-mid, #b58a1a); }
.tvs-w small{ font-size:10px; color:var(--muted, #6b7280); }
.tvs-x{ width:24px; height:24px; border:0; border-radius:6px; background:transparent; color:var(--muted, #6b7280); font-size:16px; line-height:1; cursor:pointer; flex:none; }
.tvs-x:hover{ color:#b45050; background:rgba(180,80,80,.1); }
.tvs-none{ padding:6px 8px 8px; font-size:12px; color:var(--muted, #6b7280); }
.tvs-foot{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 12px 10px 16px; border-top:1px solid var(--line2, #cbd2da); flex:none; }
.tvs-saved{ font-size:11.5px; color:var(--muted, #6b7280); }
@media (max-width:560px){ .tvs-w{ display:none; } }
body.blx-skin-noir #blxtv-setup{ background:#151412; border-color:#37342c; color:#c9c5ba; box-shadow:0 30px 70px -18px rgba(0,0,0,.8); }
body.blx-skin-noir .tvs-head, body.blx-skin-noir .tvs-foot{ border-color:#2a2823; }
body.blx-skin-noir .tvs-grab b{ color:#f3f1ec; }
body.blx-skin-noir .tvs-find, body.blx-skin-noir .tvs-w input{ background:#1b1916; border-color:#37342c; color:#f3f1ec; }
body.blx-skin-noir .tvs-sw i{ background:#37342c; }
body.blx-skin-noir .tvs-sw.on i{ background:var(--blx-acc, #c9a227); }
body.blx-skin-noir .tvs-mini, body.blx-skin-noir .tvs-add{ border-color:#37342c; }

/* ---- widen a column by its edge ---------------------------------------- */
.tvh-rzhost{ position:relative; }
.tvh-rz{ position:absolute; top:0; bottom:0; right:0; width:10px; cursor:col-resize; touch-action:none; z-index:2; }
.tvh-rz::after{ content:''; position:absolute; top:20%; bottom:20%; right:2px; width:2px; border-radius:2px; background:var(--line2, #cbd2da); opacity:0; transition:opacity .12s; }
.tvh-host:hover .tvh-rz::after{ opacity:.7; }
.tvh-rz:hover::after, body.tvh-resizing .tvh-rz::after{ opacity:1; background:var(--blx-acc-mid, #b58a1a); }
body.tvh-resizing{ cursor:col-resize; user-select:none; }