/* =============================================================================
   Mythos Backtest — application shell and page layout.
   Breakpoints: sm < 600, md/lg 600-1239 (persistent sidebar from 960), xl >= 1240.
   ============================================================================= */
.shell { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; }
.shell__main { min-width: 0; display: flex; flex-direction: column; }
.noscript { padding: var(--mythos-space-6); }

/* ---- top bar (below 960) ------------------------------------------------------------------ */
.topbar {
  position: sticky; inset-block-start: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between;
  padding: var(--mythos-space-3) var(--mythos-grid-margin-sm); min-height: 64px;
  background: var(--mythos-surface); border-block-end: 1px solid var(--mythos-border-hairline);
}
.topbar__brand { display: inline-flex; align-items: center; gap: var(--mythos-space-3); min-height: var(--mythos-size-touch-min); color: var(--mythos-text-primary); text-decoration: none; font-weight: 600; font-size: 14px; }
.brand-symbol { width: 28px; height: auto; aspect-ratio: 1380 / 1000; color: var(--mythos-text-primary); flex: none; }

/* ---- navigation: persistent sidebar >= 960, full-screen overlay below ---------------------- */
.sidenav { display: none; }
.sidenav.is-open {
  display: flex; flex-direction: column; position: fixed; inset: 0; z-index: 20; overflow-y: auto;
  padding: var(--mythos-space-5); background: var(--mythos-ground);
  animation: bt-fade var(--mythos-motion-overlay) var(--mythos-ease-enter);
}
.sidenav__brand { display: flex; align-items: center; gap: var(--mythos-space-3); padding: 0 var(--mythos-space-3) var(--mythos-space-6); min-height: 64px; }
.sidenav__brand .brand-symbol { width: 24px; }
.sidenav__name { font-size: 13px; font-weight: 600; flex: 1; }
.sidenav__list { display: flex; flex-direction: column; gap: var(--mythos-space-2); }
.sidenav__link {
  display: flex; align-items: center; min-height: var(--mythos-size-touch-min); padding: 0 var(--mythos-space-4);
  border-radius: var(--mythos-radius-control); color: var(--mythos-text-secondary); text-decoration: none; font-size: 14px;
  transition: background-color var(--mythos-motion-micro) var(--mythos-ease-move);
}
.sidenav__link:hover { color: var(--mythos-text-primary); background: var(--bt-hover); text-decoration: none; }
.sidenav__link[aria-current="page"] { color: var(--mythos-accent); background: var(--mythos-accent-dim); box-shadow: inset 3px 0 0 var(--mythos-accent); font-weight: 500; }
.sidenav__foot { margin-block-start: auto; padding: var(--mythos-space-6) var(--mythos-space-3) 0; display: flex; flex-direction: column; gap: var(--mythos-space-4); }
.sidenav__list--sub { gap: var(--mythos-space-1); }
.advanced--nav { margin-block-start: var(--mythos-space-3); }
.advanced--nav > .advanced__summary { border-color: transparent; background: transparent; color: var(--mythos-text-secondary); font-weight: 500; font-size: 14px; padding-inline: var(--mythos-space-4); }
.advanced--nav > .advanced__summary:hover { color: var(--mythos-text-primary); background: var(--bt-hover); }
.advanced--nav > .advanced__body { padding-block: var(--mythos-space-2) 0; padding-inline-start: var(--mythos-space-4); gap: 0; }
.advanced--nav .sidenav__link { font-size: 14px; }
.sidenav.is-open .advanced--nav > .advanced__summary { font-size: 17px; border-radius: 0; border-block-end: 1px solid var(--mythos-border-hairline); }
.sidenav.is-open .sidenav__link { font-size: 17px; border-radius: 0; border-block-end: 1px solid var(--mythos-border-hairline); }
.sidenav.is-open .sidenav__list { gap: 0; }
@media (min-width: 960px) {
  .shell { grid-template-columns: 240px minmax(0, 1fr); }
  .topbar { display: none; }
  .sidenav {
    display: flex; flex-direction: column; position: sticky; inset-block-start: 0; height: 100vh; overflow-y: auto;
    padding: var(--mythos-space-6) var(--mythos-space-4); gap: var(--mythos-space-2);
    background: var(--mythos-surface); border-inline-end: 1px solid var(--mythos-border-hairline);
  }
  .sidenav__close { display: none; }
  .sidenav__brand { min-height: 0; }
}
@media (max-width: 959.98px) { .sidenav:not(.is-open) .sidenav__close { display: none; } }

/* ---- main ------------------------------------------------------------------------------------ */
.main {
  width: 100%; max-width: var(--mythos-container-content); margin-inline: auto;
  padding: var(--mythos-space-6) var(--mythos-grid-margin-sm) var(--mythos-space-9); flex: 1;
}
.main:focus { outline: none; }
@media (min-width: 600px) { .main { padding-inline: var(--mythos-grid-margin-md); padding-block: var(--mythos-space-7) var(--mythos-space-9); } }
.page-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: var(--mythos-space-5); margin-block-end: var(--mythos-space-7); }
@media (min-width: 600px) { .page-head { margin-block-end: var(--mythos-space-8); } }
.page-head__text { min-width: 0; flex: 1 1 320px; }
.page-title { font: 600 clamp(25px, calc(25px + 6 * (100vw - 320px) / 920), 31px)/1.18 var(--mythos-font-display); letter-spacing: -0.015em; font-stretch: 125%; text-wrap: balance; overflow-wrap: anywhere; }
.page-title:focus { outline: none; }
.page-title:focus-visible { outline: 2px solid var(--mythos-focus-ring); outline-offset: 4px; }
.page-sub { margin-block-start: var(--mythos-space-3); color: var(--mythos-text-secondary); max-width: var(--mythos-container-prose); }
.section-label { font: 500 12px/1.34 var(--mythos-font-text); letter-spacing: 0.10em; text-transform: uppercase; color: var(--mythos-text-secondary); margin-block-end: var(--mythos-space-3); display: flex; align-items: center; gap: var(--mythos-space-3); }
.page-actions { display: flex; flex-wrap: wrap; gap: var(--bt-gap-interactive); align-items: center; }
@media (max-width: 599.98px) { .page-actions .btn--primary { width: 100%; } .page-actions { width: 100%; } }
.detail-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--mythos-space-4); margin-block-start: var(--mythos-space-4); font-size: 14px; }
.page-content { display: flex; flex-direction: column; gap: var(--mythos-space-6); min-width: 0; }
.page-content > * { min-width: 0; }
.main > * + .page-content, .main > * + .card { margin-block-start: var(--mythos-space-6); }
.stack { display: flex; flex-direction: column; gap: var(--mythos-space-4); min-width: 0; }
.stack--lg { gap: var(--mythos-space-6); }
.grid { display: grid; gap: var(--mythos-space-5); min-width: 0; }
.grid--cards { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); align-items: start; }
.grid--wide-cards { grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); align-items: start; }
.grid--main-side { grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 1240px) { .grid--main-side { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); } }
.filters { display: grid; gap: var(--mythos-space-5); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 600px) { .filters { grid-template-columns: 2fr 1fr 1fr; } }
.compare-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--mythos-space-4) var(--mythos-space-5); }
.compare-bar__hint { font-size: 14px; }

/* ---- labs: visibly distinct workspaces ------------------------------------------------------------ */
.lab__hero { margin-block-end: var(--mythos-space-6); }
.lab__grid { display: grid; gap: var(--mythos-space-6); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 1240px) {
  .lab--trading .lab__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .lab--sports .lab__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
}
.lab__hero .card--hero { display: block; }
.lab--trading .section-label::before { content: ""; width: 8px; height: 8px; background: currentColor; flex: none; }
.lab--sports .section-label::before { content: ""; width: 8px; height: 8px; background: currentColor; flex: none; transform: rotate(45deg); }
.lab--trading .card--hero .chart { margin-block-end: var(--mythos-space-5); }
.lab--sports .card--hero { border-inline-start: 2px solid var(--mythos-border-strong); }
.lab--sports .card--hero .kpi-grid { margin-block-end: var(--mythos-space-5); }
.lab--trading .card--hero { border-block-start: 2px solid var(--mythos-border-strong); }

/* ---- New test page: a single narrow column, no cards around the steps -------------------------------------------------- */
.new-test .page-head, .new-test__form, .new-test .recent { max-width: 720px; }
.new-test .recent { margin-block-start: var(--mythos-space-9); }
.new-test__form .advanced__body { padding-inline: 0; }