/* the new look: Your algos (the home), the top bar inside an algo and the stage
   switcher (owner-approved mockup, 2026-11-03). Class-only, .u- prefix; built on
   qe-ui.css's tokens, so light and dark follow <html data-theme>. */

/* ── top bar: the brand on Your algos, back + name + ⋯ inside an algo ── */
.u-tbrand{ justify-self:center; display:flex; align-items:center; gap:8px; font-weight:700; font-size:17px; min-width:0; }
.u-tbrand .u-mark{ width:26px; height:26px; border-radius:8px; }
.u-tbrand .u-mark i{ width:10px; height:10px; }
@media (min-width:1024px){ .u-tbrand{ visibility:hidden; } }      /* the menu on the left carries the brand */
.u-top-algo{ grid-template-columns:44px minmax(0,1fr) 44px; }
@media (min-width:1024px){ .u-top-algo{ grid-template-columns:auto minmax(0,1fr) auto; } }
.u-back{ display:flex; align-items:center; gap:6px; height:44px; min-width:44px; border:0; background:none; color:var(--u-t1);
         font-weight:600; font-size:15px; padding:0; border-radius:12px; cursor:pointer; }
.u-back svg{ width:24px; height:24px; flex:none; }
.u-back span{ display:none; color:var(--u-t3); }
@media (min-width:1024px){ .u-back span{ display:inline; } }
.u-aname{ font-weight:700; font-size:16px; text-align:center; }
@media (min-width:1024px){ .u-aname{ text-align:left; font-size:18px; } }
.u-top-algo .u-icon svg{ width:22px; height:22px; }

/* ── a small ⋯ menu (a card's, the top bar's) ── */
.u-home-menu{ min-width:200px; padding:6px; background:var(--u-bg); }
.u-home-menu button{ display:flex; align-items:center; gap:12px; width:100%; min-height:46px; padding:0 12px; border:0; background:none;
                     border-radius:10px; font-size:15.5px; font-weight:600; color:var(--u-t1); text-align:left; cursor:pointer; }
.u-home-menu button:hover{ background:var(--u-raise2); }
.u-home-menu button svg{ width:18px; height:18px; color:var(--u-t3); flex:none; }
.u-home-menu button.dim{ color:var(--u-t2); }
.u-home-menu-h{ padding:8px 12px 6px; font-size:13px; color:var(--u-t3); line-height:1.4; max-width:280px; overflow-wrap:anywhere; }

/* ── Your algos ── */
.u-home-head{ display:flex; align-items:center; gap:12px; padding:6px var(--u-pad) 4px; }
.u-home-head .u-h1{ margin:0; flex:1; min-width:0; }
.u-home-head .u-btn{ flex:none; }
@media (min-width:1024px){ .u-home-head{ padding:0 0 4px; } }
.u-home-wait{ padding:18px var(--u-pad); color:var(--u-t3); font-size:15px; }
@media (min-width:1024px){ .u-home-wait{ padding:18px 0; } }
.u-hc-grid{ display:grid; grid-template-columns:minmax(0,1fr); gap:12px; padding:14px var(--u-pad) 0; }
@media (min-width:1024px){ .u-hc-grid{ padding:18px 0 0; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:16px; } }
.u-hc{ position:relative; display:block; width:100%; min-width:0; text-align:left; border:1px solid var(--u-line); background:var(--u-raise);
       border-radius:var(--u-r); padding:14px 16px; color:var(--u-t1); cursor:pointer; }
.u-hc:hover{ border-color:var(--u-line2); }
.u-hc-top{ position:relative; display:flex; align-items:center; gap:8px; min-height:30px; }
.u-hc-more{ margin-left:auto; width:40px; height:40px; margin-right:-10px; border:0; background:none; border-radius:10px; color:var(--u-t3);
            display:flex; align-items:center; justify-content:center; cursor:pointer; }
.u-hc-more:hover{ background:var(--u-raise2); }
.u-hc-more svg{ width:20px; height:20px; }
.u-hc .u-home-menu{ top:44px; cursor:default; }
.u-hc-name{ margin-top:8px; font-size:17px; font-weight:700; line-height:1.3; letter-spacing:-.005em; overflow-wrap:anywhere;
            display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.u-hc-num{ display:flex; align-items:baseline; flex-wrap:wrap; gap:4px 8px; margin-top:10px; padding-right:104px; }
.u-hc-num b{ font-size:28px; font-weight:700; letter-spacing:-.02em; }
.u-hc-num span{ font-size:14px; color:var(--u-t3); font-weight:500; }
.u-hc-num.up b{ color:var(--u-green); } .u-hc-num.down b{ color:var(--u-red); }
.u-hc-spark{ position:absolute; right:16px; bottom:40px; width:96px; height:34px; color:var(--u-green); }
.u-hc-spark.down{ color:var(--u-red); }
.u-hc-line{ margin-top:6px; font-size:13.5px; color:var(--u-t3); overflow-wrap:anywhere; }
.u-hc-line .u-up, .u-hc-line .u-down{ font-weight:600; }
.u-hc-badge{ display:inline-flex; align-items:center; gap:6px; height:26px; padding:0 10px; border-radius:999px; font-size:13px; font-weight:700;
             white-space:nowrap; max-width:calc(100% - 48px); overflow:hidden; text-overflow:ellipsis; }
.u-hc-badge .u-dot{ width:7px; height:7px; }
.u-hc-badge.live{ background:var(--u-green-t); color:var(--u-green); }
.u-hc-badge.tested{ background:var(--u-blue-t); color:var(--u-blue); }
.u-hc-badge.real{ background:var(--u-gold-t); color:var(--u-gold); }
.u-hc-badge.idea{ background:var(--u-raise2); color:var(--u-t3); }

/* ── the stage switcher: an empty stage is dimmed with a dashed outline ── */
.u-stages{ padding-top:4px; }
.u-stages button{ display:inline-flex; align-items:center; gap:7px; }
.u-stages button.off{ background:none; color:var(--u-t3); opacity:.6; border:1px dashed var(--u-line2); }
.u-stages button.off.on{ opacity:1; background:var(--u-t1); color:var(--u-bg); border-color:transparent; }
.u-stages .u-dot{ width:7px; height:7px; color:var(--u-green); }
.u-stages + .u-cols .u-hero, .u-stages + .u-note{ margin-top:0; }
.u-stages + .u-cols .u-hero{ padding-top:14px; }
#buildStages .u-stages{ padding-bottom:6px; }
/* the old page-wide phone rule shrinks every h1; the home's heading keeps the mockup's size */
@media (max-width:820px){ #pageScroll .u-home-head .u-h1{ font-size:30px !important; } }
/* four stages fit a 390px phone row (they scroll sideways on a narrower one) */
@media (max-width:480px){ .u-stages{ gap:5px; } .u-stages button{ padding:0 13px; font-size:14.5px; } }
/* the short stage words show only when four stages share a phone row (Real · Practice · Tests · Build) */
.u-stages .u-st-s{ display:none; }
@media (max-width:480px){
  .u-stages-4 .u-st-l{ display:none; } .u-stages-4 .u-st-s{ display:inline; }
  .u-stages-4 button{ flex:1 1 auto; justify-content:center; padding:0 10px; }
}