/* Round 10 item 2 header redesign (sticky one-row header, inline badges,
   tightened spacing, icon+description "More" menu) is reverted per
   Round 11 — frontend/lobby.html's header is back to styles.css/
   round-four.css's own pre-Round-10 rules (badge floats above the label
   via .nav-status's own position:absolute, "More" is a plain link list).
   What stays from Round 10: the red "No credit card required" caption,
   the narrow-screen collapse-to-hamburger fix, and the full-screen
   mobile menu below (there was none before Round 10 — mobile previously
   just horizontally scrolled the header's own nav row). */

/* Item 5: "No credit card required" in Stop-loss red everywhere it
   appears, header and hero alike — real contrast in both themes
   (--down-red already carries its own light/dark values). round-four.css's
   own .hero-actions .backtest-cta-caption,.hero-cta-caption rule is a
   2-class-specificity !important green; matching that specificity here
   (rather than relying on load order alone, since two !important rules of
   different specificity don't resolve by document order) is what actually
   wins it over to red on the hero button too, not just the header one. */
.no-cc,.backtest-cta-caption.no-cc,.hero-cta-caption.no-cc,.hero-actions .backtest-cta-caption.no-cc{color:var(--down-red)!important}

/* Collapse into the hamburger before anything wraps or squeezes — nav +
   account + CTA + theme toggle all have to fit one row above this, and
   the previous design let the nav row wrap onto a second line instead of
   ever collapsing. */
.nav-menu-btn{display:none;align-items:center;justify-content:center;width:38px;height:38px;border-radius:100px;border:1px solid var(--line);background:var(--surface);color:var(--muted);flex-shrink:0}
@media(max-width:900px){
  .site-header nav,.backtest-cta-wrap,#navAccountSlot{display:none!important}
  .nav-menu-btn{display:flex!important}
}

/* Full-screen mobile menu — every nav item with its badge, the More
   items, the account section, the theme toggle, same structure as
   frontend/index.html's own .cq-mobile-menu-overlay so the two documents'
   mobile nav reads as one component. */
.mobile-nav-panel{position:fixed;inset:0;z-index:200;background:var(--bg);display:flex;flex-direction:column;overflow-y:auto}
.mobile-nav-head{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid var(--line);flex-shrink:0}
.mobile-nav-close{width:36px;height:36px;border-radius:100px;border:1px solid var(--line);background:var(--surface);display:flex;align-items:center;justify-content:center;color:var(--muted);flex-shrink:0}
.mobile-nav-body{padding:8px 16px 28px;display:flex;flex-direction:column;gap:2px}
.mobile-nav-item{display:flex;align-items:center;gap:10px;width:100%;text-align:left;font-weight:600;font-size:15px;color:var(--ink);padding:13px 12px;border-radius:10px;min-height:48px;box-sizing:border-box}
.mobile-nav-item:active{background:var(--surface-muted)}
/* .nav-status is position:absolute by default (round-four.css) so it can
   float above the desktop nav's own link — inside this flat mobile list
   it needs to sit inline instead, same idea as index.html's mobile menu
   using its own non-floating .cq-nav-inline-label class for this. */
.mobile-nav-item .nav-status{position:static;transform:none;display:inline-flex;align-items:center;gap:5px;line-height:1;margin-left:auto}
.mobile-nav-item small{display:block;font-size:12px;font-weight:500;color:var(--muted);margin-top:1px}
.mobile-nav-divider{height:1px;background:var(--line);margin:8px 0;flex-shrink:0}
.mobile-nav-account{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px;background:var(--surface-muted);border-radius:10px;margin:2px 0}
.mobile-nav-account-name{font-weight:600;font-size:14px;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mobile-nav-account-signout{font-size:13px;font-weight:650;color:var(--down-red)}

@media(max-width:420px){
  .mobile-nav-head{padding:16px 18px}
  .mobile-nav-body{padding:6px 12px 24px}
}

/* ===========================================================
   Round 10 item 3: homepage demo's Risk per trade card = Advanced Mode's
   own .cq-kit-field.risk exactly — gold outlined card, tinted background,
   "Decide what to risk" helper, one big always-editable value integrated
   into the card (not a plain default-spinner number field off to the
   side), $/% toggle, gold slider (already native accent-color:currentColor
   on .control's own color:var(--risk-amber), nothing to change there).
=========================================================== */
.control.risk.kit-risk{
  border:1.5px solid color-mix(in srgb, var(--risk-amber) 30%, transparent);
  border-radius:12px;
  background:var(--risk-fill);
  padding:15px 16px;
  margin-top:2px;
}
.control.risk.kit-risk:focus-within{border-color:var(--risk-amber);box-shadow:0 0 0 3px color-mix(in srgb, var(--risk-amber) 18%, transparent)}
.kit-risk-helper{margin:2px 0 0;font-size:12px;font-weight:600;opacity:.85}
.kit-risk-amount-row{margin-top:10px}
.kit-risk-amount-wrap{display:flex;align-items:baseline;gap:2px}
.kit-risk-affix{order:0;font-size:24px;font-weight:750;color:var(--risk-amber)}
.kit-risk-affix.suffix{order:2}
.kit-risk-input{order:1;appearance:textfield;-moz-appearance:textfield;width:100%;min-width:0;flex:1;background:transparent;border:0;padding:0;margin:0;color:var(--risk-amber);font:750 32px var(--font);font-variant-numeric:tabular-nums}
.kit-risk-input::-webkit-inner-spin-button,.kit-risk-input::-webkit-outer-spin-button{appearance:none;-webkit-appearance:none;margin:0}
.kit-risk-input:focus,.kit-risk-input:focus-visible{outline:0}
.kit-risk-sub{display:block;margin-top:1px;font-size:12px;font-weight:600;color:var(--risk-amber);opacity:.75}
.kit-risk-slider{margin:12px 0 3px}
.risk-explanation b{font-size:14px;font-weight:800}