/* Trading OS Preview V4 shell, adapted only to host canonical Spyglass as the Trade room. */
html.trading-os-workspace {
  --tos-bg:#070a0f;
  --tos-side:#0b1018;
  --tos-card:#101722;
  --tos-card2:#151e2b;
  --tos-line:#253044;
  --tos-text:#f4f1ea;
  --tos-muted:#aeb8c5;
  --tos-soft:#7f8b9c;
  --tos-blue:#69a9ff;
  --tos-green:#6bcf8e;
  --tos-red:#ef7d7d;
}

html.trading-os-workspace body {
  margin:0;
  overflow:hidden;
  background:var(--tos-bg);
  color:var(--tos-text);
  font-family:Inter,"Source Sans 3","Segoe UI",Arial,sans-serif;
}

#tos-shell {
  width:100vw;
  height:100dvh;
  display:grid;
  grid-template-columns:252px minmax(0,1fr);
  background:var(--tos-bg);
}

#tos-rail {
  min-width:0;
  padding:24px 17px 18px;
  background:var(--tos-side);
  border-right:1px solid var(--tos-line);
  overflow:auto;
  z-index:40;
}

.tos-brand {
  display:flex;
  gap:12px;
  align-items:center;
  margin-bottom:22px;
}

.tos-mark {
  width:46px;
  height:46px;
  display:grid;
  place-items:center;
  border:1px solid #38506f;
  border-radius:11px;
  background:#152135;
  color:#f4f1ea;
  font-size:16px;
  font-weight:900;
  letter-spacing:.02em;
}

.tos-brand strong {
  display:block;
  color:#fff;
  font-size:19px;
  line-height:1.15;
}

.tos-brand small {
  display:block;
  margin-top:4px;
  color:var(--tos-soft);
  font-size:12px;
  letter-spacing:.04em;
}

.tos-nav {
  display:grid;
  gap:6px;
}

.tos-nav button {
  position:relative;
  min-height:46px;
  padding:10px 12px;
  border:1px solid transparent;
  border-radius:9px;
  background:transparent;
  color:#cbd4df;
  text-align:left;
  font:750 16px/1.2 Inter,"Source Sans 3","Segoe UI",Arial,sans-serif;
  cursor:pointer;
}

.tos-nav button:hover { background:#111a27; }
.tos-nav button.active {
  background:var(--tos-card2);
  border-color:#2b3b51;
  color:#fff;
}
.tos-nav button.active::before {
  content:"";
  position:absolute;
  left:-7px;
  top:9px;
  bottom:9px;
  width:3px;
  border-radius:3px;
  background:var(--tos-blue);
}

.tos-rail-foot {
  margin-top:24px;
  padding:14px 12px 0;
  border-top:1px solid var(--tos-line);
  color:var(--tos-soft);
  font-size:12px;
  line-height:1.55;
}

#tos-stage {
  position:relative;
  min-width:0;
  height:100dvh;
  overflow:hidden;
  background:var(--tos-bg);
}

#tos-trade {
  width:100%;
  height:100%;
  min-width:0;
  overflow:auto;
  background:var(--night,#090b0d);
}

#tos-room {
  display:none;
  width:100%;
  height:100%;
  overflow:auto;
  overscroll-behavior:contain;
  padding:32px clamp(22px,3vw,46px) 70px;
  background:var(--tos-bg);
}

#tos-room.active { display:block; }
html.trading-os-workspace body.tos-room-open #tos-trade { display:none !important; }

.tos-page {
  width:100%;
  max-width:1450px;
  min-width:0;
  margin:0 auto;
}

.tos-head {
  display:flex;
  justify-content:space-between;
  gap:24px;
  align-items:flex-end;
  margin-bottom:22px;
}

.tos-head h1 {
  margin:0;
  color:#fff;
  font-size:46px;
  line-height:1;
  letter-spacing:-.04em;
}

.tos-meta {
  color:var(--tos-muted);
  text-align:right;
  font-size:14px;
  line-height:1.55;
}

.tos-market {
  display:grid;
  grid-template-columns:1.3fr .8fr .8fr .9fr;
  gap:12px;
  min-width:0;
  padding:16px;
  border:1px solid var(--tos-line);
  border-radius:12px;
  background:var(--tos-card);
  margin-bottom:16px;
}

.tos-market > div { min-width:0; }
.tos-kicker {
  color:var(--tos-soft);
  font-size:13px;
  font-weight:850;
  text-transform:uppercase;
  letter-spacing:.05em;
}
.tos-value {
  margin-top:6px;
  color:#fff;
  font-size:22px;
  font-weight:900;
  overflow-wrap:anywhere;
  font-variant-numeric:tabular-nums;
}
.tos-sub {
  margin-top:4px;
  color:var(--tos-muted);
  font-size:14px;
  line-height:1.4;
  overflow-wrap:anywhere;
}

.tos-section { margin-top:25px; min-width:0; }
.tos-section-head {
  display:flex;
  justify-content:space-between;
  gap:18px;
  align-items:flex-end;
  margin-bottom:12px;
}
.tos-section-head h2 { margin:0; color:#fff; font-size:28px; letter-spacing:-.025em; }

.tos-panel {
  min-width:0;
  overflow:auto;
  border:1px solid var(--tos-line);
  border-radius:12px;
  background:var(--tos-card);
}

.tos-empty {
  padding:24px;
  color:var(--tos-muted);
  font-size:16px;
  line-height:1.6;
  overflow-wrap:anywhere;
}
.tos-empty strong { color:#fff; }

.tos-room-link {
  display:inline-flex;
  margin-top:14px;
  padding:9px 12px;
  border:1px solid #334157;
  border-radius:8px;
  background:#151e2b;
  color:#fff;
  text-decoration:none;
  font-weight:800;
}

#tos-menu {
  display:none;
  position:fixed;
  z-index:80;
  left:12px;
  top:12px;
  min-width:70px;
  height:44px;
  padding:0 13px;
  border:1px solid #334157;
  border-radius:8px;
  background:var(--tos-card);
  color:#fff;
  font:800 15px/1 Inter,"Source Sans 3","Segoe UI",Arial,sans-serif;
  cursor:pointer;
}

.tos-metrics {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:1px;
  background:var(--tos-line);
}
.tos-metrics.compact { grid-template-columns:repeat(4,minmax(0,1fr)); margin:0; }
.tos-metric { min-width:0; padding:16px; background:var(--tos-card); }
.tos-metric.positive .tos-value { color:var(--tos-green); }
.tos-metric.negative .tos-value { color:var(--tos-red); }
.tos-account-value { font-size:17px; line-height:1.35; }

.tos-meta-line {
  padding:10px 14px;
  border-bottom:1px solid var(--tos-line);
  color:var(--tos-muted);
  font-size:14px;
  line-height:1.45;
  overflow-wrap:anywhere;
}

.tos-note {
  margin:0;
  padding:12px 14px;
  border-top:1px solid var(--tos-line);
  color:var(--tos-muted);
  font-size:15px;
  line-height:1.5;
  overflow-wrap:anywhere;
}
.tos-note strong { color:var(--tos-text); }
.tos-note.warning { color:#ebd18f; }
.tos-note.positive { color:#b8e4c7; }

.tos-table-wrap { width:100%; max-width:100%; overflow:auto; overscroll-behavior:contain; }
.tos-table { width:100%; border-collapse:collapse; min-width:720px; font-size:15px; }
.tos-table th,.tos-table td { padding:12px 14px; border-top:1px solid var(--tos-line); text-align:left; vertical-align:top; }
.tos-table th { color:var(--tos-soft); font-size:14px; letter-spacing:.04em; text-transform:uppercase; }
.tos-table td { color:#dbe2ea; }

.tos-report-list,.tos-session-list,.tos-jury-list,.tos-strategy-list { display:grid; min-width:0; }
.tos-report { min-width:0; padding:16px; border-top:1px solid var(--tos-line); }
.tos-report:first-child { border-top:0; }
.tos-report-head { display:flex; align-items:center; justify-content:space-between; gap:14px; color:var(--tos-muted); font-size:14px; }
.tos-report-head strong { color:#caa8ff; font-size:16px; }
.tos-report-title { margin-top:7px; color:#fff; font-size:18px; font-weight:850; line-height:1.35; overflow-wrap:anywhere; }
.tos-report p { margin:8px 0 0; color:#c7d0da; font-size:15px; line-height:1.5; overflow-wrap:anywhere; }
.tos-report ul { margin:8px 0 0; padding-left:20px; color:var(--tos-muted); font-size:15px; line-height:1.5; }
.tos-report .tos-meta-line { padding:5px 0 0; border:0; }

.tos-jury-row,.tos-strategy-row { min-width:0; border-top:1px solid var(--tos-line); background:var(--tos-card); }
.tos-jury-row:first-child,.tos-strategy-row:first-child { border-top:0; }
.tos-jury-head,.tos-strategy-head { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; min-width:0; padding:16px; border-bottom:1px solid var(--tos-line); }
.tos-jury-head > div,.tos-strategy-head > div { min-width:0; }
.tos-jury-head strong,.tos-strategy-head strong { display:block; color:#fff; font-size:20px; overflow-wrap:anywhere; }
.tos-jury-head small,.tos-strategy-head small { display:block; margin-top:4px; color:var(--tos-muted); font-size:14px; line-height:1.45; overflow-wrap:anywhere; }
.tos-jury-copy { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px; min-width:0; background:var(--tos-line); border-top:1px solid var(--tos-line); }
.tos-jury-copy p { min-width:0; margin:0; padding:14px 16px; background:var(--tos-card); color:#c7d0da; font-size:15px; line-height:1.5; overflow-wrap:anywhere; }
.tos-jury-copy b { color:#fff; font-size:14px; letter-spacing:.04em; text-transform:uppercase; }
.tos-strategy-warnings { padding:12px 16px 14px; border-top:1px solid var(--tos-line); color:#ebd18f; font-size:14px; line-height:1.5; overflow-wrap:anywhere; }
.tos-strategy-warnings ul { margin:0; padding-left:20px; }

.tos-session { display:grid; grid-template-columns:minmax(220px,.9fr) minmax(170px,.5fr) minmax(0,1.6fr); gap:18px; min-width:0; padding:15px 16px; border-top:1px solid var(--tos-line); align-items:start; }
.tos-session:first-child { border-top:0; }
.tos-session strong { color:#fff; font-size:16px; }
.tos-session b { color:#fff; }
.tos-session small { display:block; margin-top:4px; color:var(--tos-muted); font-size:14px; }
.tos-session-head { display:contents; }
.tos-session ul { grid-column:3; grid-row:1 / span 2; margin:0; padding-left:20px; color:#c7d0da; font-size:15px; line-height:1.55; }
.tos-session > .tos-sub { grid-column:1 / span 2; }

.tos-source-grid,.tos-study-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; min-width:0; padding-top:14px; }
.tos-source,.tos-study { min-width:0; border:1px solid var(--tos-line); border-radius:10px; background:var(--tos-card); overflow:hidden; }
.tos-source-head { padding:16px; border-bottom:1px solid var(--tos-line); }
.tos-source-head strong { display:block; margin-top:9px; color:#fff; font-size:18px; line-height:1.35; overflow-wrap:anywhere; }
.tos-source-head small { display:block; margin-top:6px; color:var(--tos-muted); font-size:14px; line-height:1.45; overflow-wrap:anywhere; }
.tos-source-body { padding:15px 16px 17px; color:#c8d0da; font-size:15px; line-height:1.55; }
.tos-source-body p { margin:0 0 13px; }
.tos-source-body p:last-child { margin-bottom:0; }
.tos-source-body b { color:#fff; }
.tos-source-body a { color:#99c7ff; }
.tos-source-body ul { padding-left:20px; }

.tos-research-lane { padding:12px 0; border-top:1px solid var(--tos-line); }
.tos-research-lane:first-child { padding-top:0; border-top:0; }
.tos-research-lane strong { display:block; margin-top:7px; color:#fff; font-size:16px; }
.tos-research-lane small { display:block; margin-top:4px; color:var(--tos-muted); font-size:14px; line-height:1.45; }

.tos-badge { display:inline-block; flex:0 0 auto; padding:4px 7px; border:1px solid #35445a; border-radius:6px; color:#aebdd0; background:#0d141f; font-size:13px; font-weight:900; letter-spacing:.04em; text-transform:uppercase; }
.tos-badge.supported { color:#b8e4c7; border-color:#345c43; }
.tos-badge.overfit_warning,.tos-badge.not_established,.tos-badge.collecting { color:#ebd18f; border-color:#5b4b26; }
.tos-error strong { color:#f0c5c5; }
.tos-loading { color:#d6e7fa; }
.tos-section-head .tos-room-link { margin-top:0; }

/* Spyglass Trade room integration: V4 shell owns navigation, Spyglass owns all market/trading mechanics. */
#tos-trade .topbar { top:0; }
#tos-trade .workspace { min-height:calc(100dvh - 74px); }
#tos-trade .product-name { font-size:22px; }
#tos-trade .powered-line { white-space:nowrap; }

@media (max-width:1180px) {
  #tos-shell { grid-template-columns:220px minmax(0,1fr); }
  .tos-market { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .tos-metrics,.tos-metrics.compact { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .tos-source-grid,.tos-study-grid { grid-template-columns:1fr; }
  .tos-jury-copy { grid-template-columns:1fr; }
}

@media (max-width:800px) {
  #tos-shell { grid-template-columns:1fr; }
  #tos-rail {
    position:fixed;
    inset:0 auto 0 0;
    width:min(320px,88vw);
    transform:translateX(-105%);
    transition:transform .2s ease;
    box-shadow:20px 0 60px #0009;
  }
  #tos-rail.open { transform:none; }
  #tos-menu { display:block; }
  #tos-room { padding:76px 14px 48px; }
  .tos-head { display:block; }
  .tos-meta { margin-top:12px; text-align:left; }
  .tos-head h1 { font-size:38px; }
  .tos-session { display:block; }
  .tos-session > * { margin-bottom:9px; }
  .tos-session ul { margin-top:8px; }
  #tos-trade .topbar { padding-left:92px; }
}

@media (max-width:520px) {
  .tos-market { grid-template-columns:1fr; }
  .tos-head h1 { font-size:34px; }
  .tos-metrics,.tos-metrics.compact { grid-template-columns:1fr; }
  .tos-report-head,.tos-jury-head,.tos-strategy-head { align-items:flex-start; }
}