/* ============================================================
   MASTER VORTEX — RUNNERS SCANNER tab styles (chart-runners.js
   companion, view: #runnersView). The board lives in its own
   top view tab (moved out of the dashboard dock 2026-11-03,
   CEO directive) and speaks the platform view language of
   meme.css / earnings.css: --panel ground, --edge borders.
   Direction colors stay the dashboard family's --d-green /
   --d-red. Platform rule (runners.css): every font-weight in
   this file is 400.
   ============================================================ */

/* When the Runners view is open it owns the workspace: the
   chart grid steps aside. */
body.mv-runners-open .main{display:none}
body.mv-runners-open .tf-group{visibility:hidden}

.mvrun-view{flex:1; min-height:0; display:flex; flex-direction:column;
  background:var(--panel); margin:10px; border:1px solid var(--edge); border-radius:14px;
  overflow:hidden}
.mvrun-view[hidden]{display:none}

/* --- head: title + mode toggle + settings --- */
.mvrun-head{
  flex:0 0 auto; display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:12px 16px; border-bottom:1px solid var(--edge); background:var(--panel-2);
}
.mvrun-title{
  color:var(--ink); font-size:15px; font-weight:400; letter-spacing:1.5px;
}
.mvrun-modes{ display:flex; gap:0; border:1px solid var(--edge); border-radius:10px; overflow:hidden; }
.mvrun-mode{
  background:transparent; color:var(--dim); border:0; border-radius:0;
  font-size:12px; font-weight:400; padding:7px 14px; font-family:inherit; cursor:pointer; letter-spacing:.4px;
}
.mvrun-mode + .mvrun-mode{ border-left:1px solid var(--edge); }
.mvrun-mode.on{ background:#17351c; color:var(--green); }
.mvrun-mode:hover{ color:var(--ink); }

/* --- direction toggle (TOP GAINERS / TOP LOSERS) --- */
.mvrun-dirtoggle{
  flex:0 0 auto; display:flex; align-items:center; gap:8px;
  padding:10px 16px 2px;
}
.mvrun-dir{
  background:transparent; color:var(--dim); border:1px solid var(--edge); border-radius:10px;
  font-size:12px; font-weight:400; padding:7px 14px; font-family:inherit; cursor:pointer; letter-spacing:.4px;
}
.mvrun-dir:hover{ color:var(--ink); }
.mvrun-dir.on{ background:#17351c; color:var(--green); border-color:#17351c; }
.mvrun-dirtoggle .mvrun-sec-note{ margin-left:auto; }

/* --- settings row --- */
.mvrun-settings{
  flex:0 0 auto; display:flex; flex-direction:column; gap:6px;
  padding:10px 16px; border-bottom:1px solid var(--edge); background:#0a1322;
}
.mvrun-set-row{
  display:flex; align-items:center; gap:6px;
  color:var(--dim); font-size:12.5px; font-weight:400; cursor:pointer;
}
.mvrun-set-row select{
  background:#0a1524; color:var(--ink); border:1px solid #1c3350; border-radius:5px;
  font-size:12px; font-weight:400; padding:2px 4px; font-family:inherit; cursor:pointer;
}

/* --- body: one toggled list, full columns sitting together
   (CEO 2026-11-04 "fill it up": SYMBOL | LAST | $ CHG | % CHG,
   no dead middle — the tracks are sized to their content and
   start at the left edge; the news button rides the row end) --- */
.mvrun-body{ flex:1 1 auto; min-height:0; overflow-y:auto; display:flex; flex-direction:column; }
.mvrun-sec-note{ color:var(--dim); font-size:11px; letter-spacing:.2px; text-align:right; }
.mvrun-cols{
  flex:0 0 auto; display:grid; grid-template-columns:minmax(72px,130px) 92px 92px 84px 30px;
  gap:10px; align-items:baseline; padding:10px 16px 4px;
  color:var(--dim); font-size:10.5px; font-weight:400; letter-spacing:1.1px;
}
.mvrun-rows{ flex:0 0 auto; display:flex; flex-direction:column; }
.mvrun-row{
  display:grid; grid-template-columns:minmax(72px,130px) 92px 92px 84px 30px; align-items:baseline; gap:10px;
  width:100%; padding:7px 16px; background:transparent; border:none; border-bottom:1px solid #101c2e;
  font-family:inherit; font-size:13.5px; font-weight:400; color:var(--ink); cursor:pointer; text-align:left;
}
.mvrun-row:hover{ background:#0a1524; }
.mvrun-sym{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mvrun-sym.up{ color:var(--d-green); }
.mvrun-sym.dn{ color:var(--d-red); }
.mvrun-num{ text-align:right; font-variant-numeric:tabular-nums; }
.mvrun-px{ color:var(--dim); font-size:12.5px; }
.mvrun-chg{ font-size:12.5px; }
.mvrun-chg.up{ color:var(--d-green); }
.mvrun-chg.dn{ color:var(--d-red); }
.mvrun-pct.up{ color:var(--d-green); }
.mvrun-pct.dn{ color:var(--d-red); }
.mvrun-news-btn{ text-align:center; font-size:14px; line-height:1; opacity:.8; cursor:pointer; }
.mvrun-news-btn:hover{ opacity:1; }

/* --- per-symbol news panel (inside the tab) --- */
.mvrun-news{
  flex:0 0 auto; margin:8px 16px 4px; padding:10px 14px;
  background:#0a1322; border:1px solid var(--edge); border-radius:10px;
}
.mvrun-news[hidden]{ display:none; }
.mvrun-news-head{
  display:flex; align-items:center; justify-content:space-between;
  color:var(--ink); font-size:12px; font-weight:400; letter-spacing:1.1px; margin-bottom:4px;
}
.mvrun-news-x{
  background:transparent; border:none; color:var(--dim); font-size:13px; cursor:pointer; padding:2px 4px;
}
.mvrun-news-x:hover{ color:var(--ink); }
.mvrun-news-body{ color:var(--dim); font-size:12.5px; }
.mvrun-news-item{ display:block; padding:6px 0; text-decoration:none; border-bottom:1px solid #101c2e; }
.mvrun-news-item:last-child{ border-bottom:none; }
.mvrun-news-title{ display:block; color:var(--ink); font-size:13px; line-height:1.35; }
.mvrun-news-item:hover .mvrun-news-title{ color:var(--green); }
.mvrun-news-meta{ display:block; color:var(--dim); font-size:11px; margin-top:2px; }
.mvrun-empty{ padding:10px 16px 14px; color:var(--dim); font-size:12.5px; }
.mvrun-foot{
  flex:0 0 auto; padding:10px 16px 12px; color:var(--dim); font-size:11.5px; line-height:1.35;
  border-top:1px solid var(--edge);
}

/* --- pop-up toasts (CEO 2026-11-04): runner pops get their OWN
   dedicated container (#mvRunToasts, built by chart-runners.js) --
   they no longer share the alert stack #mvaToasts, so price-alert
   toasts stay bottom-right untouched. The runner container is
   CENTERED over the watchlist panel: CSS centres it on the
   viewport as a fallback (left/top 50% + translate), and
   chart-runners.js re-pins left/top to the .watchlist element's
   centre on every pop (panel-swap and resize safe). Cards are a
   little BIGGER than the old bottom toasts: larger padding,
   ticker/% headline and sub-line. Base .mva-toast shell still
   comes from alerts.css; these rules re-color + enlarge. --- */
.mvrun-toasts{
  position:fixed; left:50%; top:50%; transform:translate(-50%,-50%); z-index:90;
  display:flex; flex-direction:column; gap:10px; align-items:center;
  width:max-content; max-width:min(340px, calc(100vw - 24px));
  pointer-events:none;
}
.mvrun-toasts .mvrun-toast{
  pointer-events:auto;
  min-width:min(260px, calc(100vw - 32px));
  padding:16px 44px 16px 18px; border-radius:12px;
  font-size:17px; line-height:1.3; border-left-width:6px;
  box-shadow:0 16px 40px rgba(0,0,0,.65);
  animation:mvrun-in .18s ease-out;
}
.mvrun-toasts .mvrun-toast b{ font-size:19px; letter-spacing:.3px; }
.mvrun-toasts .mvrun-toast .mva-sub{ font-size:14px; margin-top:4px; line-height:1.35; }
.mvrun-toasts .mvrun-toast .mva-tx{ top:8px; right:10px; font-size:19px; }
@keyframes mvrun-in{ from{ transform:scale(.92); opacity:0; } to{ transform:none; opacity:1; } }
.mvrun-toast.up{ border-color:rgba(46,230,107,.6); border-left:6px solid var(--d-green); }
.mvrun-toast.dn{ border-color:rgba(255,77,94,.6); border-left:6px solid var(--d-red); }
.mvrun-toast.up b{ color:var(--d-green); }
.mvrun-toast.dn b{ color:var(--d-red); }

@media (max-width: 900px) {
  .mvrun-view{ margin:6px; }
  .mvrun-toasts .mvrun-toast{ min-width:min(230px, calc(100vw - 32px)); }
}