/* ============================================================
   RevealLab — app shell layout
   topbar / stat strip / 3-col main grid / full-width results
   ============================================================ */
.app{display:flex;flex-direction:column;min-height:100vh}

/* ---- top bar ---- */
#topbar{
  height:var(--topbar-h);min-height:var(--topbar-h);
  display:flex;align-items:center;gap:16px;
  padding:0 22px;background:var(--surface);
  border-bottom:1px solid var(--border);
  position:sticky;top:0;z-index:40;
}
.brand{display:flex;align-items:center;gap:11px}
.brand__logo{width:30px;height:30px}
.brand__name{font-size:18px;font-weight:700;letter-spacing:-.02em}
.brand__sub{font-size:11px;color:var(--text-3);font-weight:600;text-transform:uppercase;letter-spacing:.08em;
  border-left:1px solid var(--border-strong);padding-left:11px;margin-left:2px}
.topbar__spacer{flex:1}
.topbar__nav{display:flex;gap:4px}
.topbar__right{display:flex;align-items:center;gap:14px}

/* ---- stat strip ---- */
#stat-strip{
  display:flex;align-items:stretch;
  min-height:var(--statstrip-h);
  background:var(--surface);border-bottom:1px solid var(--border);
  padding:0 8px;overflow-x:auto;
}

/* ---- main 3-column grid ---- */
.main{
  display:grid;
  grid-template-columns:294px minmax(0,1fr) 348px;
  grid-template-areas:"watch chart strat";
  gap:14px;padding:14px;
}
/* the 3-col workspace is bounded to ~viewport so panels scroll internally
   instead of ballooning the grid; the results panel flows below (page scrolls). */
#panel-watchlist,#panel-chart,#panel-strategies{
  height:clamp(520px, calc(100vh - var(--topbar-h) - var(--statstrip-h) - 30px), 780px);
  min-height:0;
}
#panel-watchlist{grid-area:watch}
#panel-chart{grid-area:chart}
#panel-strategies{grid-area:strat}
#panel-runner{grid-column:1 / -1}
#panel-results{grid-column:1 / -1}

/* settings page (hidden until routed) */
#page-settings{display:none;width:100%}/* .set-page owns padding/max-width/centering */
body[data-route="settings"] .main{display:none}
body[data-route="settings"] #page-settings{display:block}
#page-history{display:none;width:100%}
body[data-route="history"] .main{display:none}
body[data-route="history"] #page-history{display:block}

@media(max-width:1180px){
  .main{grid-template-columns:260px minmax(0,1fr);
    grid-template-areas:"watch chart" "strat strat"}
  #panel-strategies{height:auto;min-height:380px}
}