/* the new look: overview area (class-only, .u- prefix).
   The Overview is built from qe-ui.css; these rules only add what that
   library leaves to each page. */

/* the aside scrolls with the page: with holdings and trades it can be taller
   than the screen, and a sticky column would hide its lower rows */
.u-ov .u-cols > .u-aside{ position:static; }

/* a long test name wraps the status pill onto two lines: a rounded box then, not a capsule
   (on one line 15px is the same full round as the library's 999px) */
.u-ov .u-hero .u-status{ border-radius:15px; }

/* a long title in a row ends in "…" instead of spilling */
.u-ov .u-row .t{ overflow:hidden; text-overflow:ellipsis; }


/* which test (when the algo has more than one) */
.u-ov-tests{ padding-top:14px; }
.u-ov-tests button{ max-width:240px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* a quiet line in the hero while a practice run is going, with its Stop button */
.u-ov-line{ display:flex; align-items:center; flex-wrap:wrap; gap:10px 14px; margin-top:12px; font-size:13.5px; color:var(--u-t3); line-height:1.45; }
.u-ov-line > span{ flex:1 1 240px; min-width:0; overflow-wrap:anywhere; }

/* one note under the hero: what happened, then its buttons */
.u-ov-nt{ flex:1; min-width:0; overflow-wrap:anywhere; }
.u-ov-nb{ display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }

/* nothing to show yet: a headline, one sentence, one big button */
.u-ov-eh .u-h1{ margin:16px 0 8px; }
.u-ov-eh p{ margin:0; font-size:16px; color:var(--u-t2); line-height:1.5; max-width:640px; }
.u-ov-eh .u-cta{ margin-top:22px; }
.u-ov-more{ display:flex; justify-content:center; margin-top:8px; }
@media (min-width:1024px){
  .u-ov-eh .u-cta{ display:inline-flex; width:auto; padding:0 32px; }
  .u-ov-more{ justify-content:flex-start; }
}

/* headlines may take two lines */
.u-ov-news .u-row .t{ white-space:normal; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; line-height:1.35; }

/* 1100–1379px: the left column is narrow, three stats across read better than four */
@media (min-width:1100px) and (max-width:1379px){ .u-ov .u-cols .u-stats{ grid-template-columns:repeat(3,minmax(0,1fr)); } }

/* the welcome and "Select an algo": one readable column on a computer */
.u-ov-narrow{ max-width:760px; }
.u-ov-steps{ list-style:none; margin:0; padding:0 var(--u-pad); }
@media (min-width:1024px){ .u-ov-steps{ padding:0; } }
.u-ov-steps li{ display:grid; grid-template-columns:32px minmax(0,1fr); gap:14px; padding:14px 0; border-bottom:1px solid var(--u-line); }
.u-ov-steps li:last-child{ border-bottom:0; }
.u-ov-steps .n{ width:32px; height:32px; border-radius:50%; background:var(--u-raise2); color:var(--u-t2); display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:700; }
.u-ov-step{ min-width:0; }
.u-ov-step .t{ font-size:16px; font-weight:600; }
.u-ov-step .s{ margin-top:3px; font-size:14.5px; color:var(--u-t3); line-height:1.55; }

/* btBanner / emptyState: used above other pages too. A page not yet in the new
   look already has #pageScroll's side padding, so no side margin of their own;
   inside a .u-page they keep the library's */
.u-ov-bt, .u-ov-es{ margin-left:0; margin-right:0; }
@media (max-width:1023px){ .u-page .u-ov-bt, .u-page .u-ov-es{ margin-left:var(--u-pad); margin-right:var(--u-pad); } }
.u-ov-bt{ margin-bottom:18px; }
.u-ov-bt .u-dot{ margin-top:7px; color:var(--u-blue); }
.u-ov-bt b{ color:var(--u-t1); }
.u-ov-bt-s{ color:var(--u-t3); }
.u-ov-es{ margin-bottom:18px; }

/* pctBadge: "(+0.04%) past month" */
.u-ov-pct{ font-weight:600; }
.u-ov-pct.up{ color:var(--u-green); } .u-ov-pct.down{ color:var(--u-red); } .u-ov-pct.flat{ color:var(--u-t3); }
.u-ov-period{ font-size:13px; font-weight:500; color:var(--u-t3); }

/* versions of a test (main-version): what it was made from, the neutral link, "Make this the main version" */
.u-ov-ver{ margin:12px var(--u-pad) 0; padding:12px 14px; border-radius:12px; background:var(--u-raise); min-width:0; }
.u-ov-ver-t{ margin:0; font-size:14px; line-height:1.5; color:var(--u-t2); overflow-wrap:anywhere; }
.u-ov-ver-b{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:10px; }
.u-ov-ver-b .u-btn{ max-width:100%; white-space:normal; }
.u-ov-ver-main{ font-size:12.5px; font-weight:700; letter-spacing:.02em; padding:6px 10px; border-radius:999px;
                color:var(--u-green); background:var(--u-green-t); border:1px solid currentColor; }
@media (min-width:1024px){ .u-ov-ver{ margin-left:0; margin-right:0; } }

/* the stage page (2026-11-03): four numbers, then "All stats" / "Details" in place */
.u-ov-links{ display:flex; flex-wrap:wrap; gap:4px 18px; padding:2px var(--u-pad) 0; }
@media (min-width:1024px){ .u-ov-links{ padding:2px 0 0; } }
.u-ov-links .u-link{ border:0; background:none; padding:12px 0; font-size:15px; font-weight:600; color:var(--u-green); cursor:pointer; }
.u-ov-stop{ padding-top:18px; }
.u-ov .u-cols .u-aside > .u-ov-rows:first-child, .u-ov .u-cols .u-aside > .u-ov-morewrap:first-child{ margin-top:0; }
.u-ov-rows{ margin-top:22px; }
.u-ov-morewrap{ margin-top:12px; }
.u-ov-moreb .t{ font-size:18px; font-weight:700; }
.u-ov-morelist .u-row.sub{ min-height:52px; }
.u-ov-morelist .u-row.sub .t{ font-size:15.5px; }
.u-ov-morelist .u-row .s{ white-space:normal; }
.u-ov-morelist .u-row.u-ov-del .t{ color:var(--u-red); }