/* Design tokens. Defaults = Quant Terminal; theme-manager.js overwrites per theme. */
:root {
  /* Defaults = corporate "Backtest" theme (void / bone / acid). theme-manager.js overwrites per theme. */
  --bgCanvas: #0B0B0C; --bgPanel: #141415; --glassSurface: rgba(11,11,12,.82); --borderSubtle: rgba(245,245,240,.09);
  --accentPrimary: #D4FF3A; --accentSecondary: #D4FF3A; --textPrimary: #F5F5F0; --textMuted: #8C8C86; --onAccent: #0B0B0C;
  --reelWell: #101011; --pocketRed: #FF3D7F; --pocketBlack: #1E1E20; --pocketZero: #D4FF3A;
  --chartLine: #D4FF3A; --chartFill: rgba(212,255,58,.14); --evBaseline: #8C8C86; --dangerSpike: #FF3D7F; --trim: #3A3A3D;
  --fontDisplay: 'Inter', system-ui, sans-serif; --fontMono: 'JetBrains Mono', ui-monospace, monospace;
  --fontBrand: 'Unbounded', 'Inter', sans-serif;
  --glow: rgba(212,255,58,.35);
  --frameBg: linear-gradient(180deg,#1f242d,#0b0e13); --frameShadow: inset 0 1px 0 rgba(255,255,255,.14), 0 24px 48px rgba(0,0,0,.6);
  --frameRadius: 18px; --cellRadius: 8px; --cellShadow: inset 0 0 0 1px rgba(255,255,255,.12);
  --screw: none; --screwDisp: none; --led: none; --ledH: 0px; --dial: none; --dialDisp: none;
  --ease: cubic-bezier(.22,1,.36,1);
}

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bgCanvas); }
body {
  color: var(--textPrimary); font-family: var(--fontDisplay); -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent; transition: background .3s;
}
[hidden] { display: none !important; }
button { font: inherit; cursor: pointer; -webkit-user-select: none; user-select: none; color: inherit; }
select, input { font: inherit; }
a { color: var(--accentPrimary); }

/* Shell: 240px rail + content on desktop; header + dock on mobile */
.shell { display: grid; grid-template-columns: 240px minmax(0, 1fr); min-height: 100vh; }
.col { min-width: 0; display: flex; flex-direction: column; }

.rail {
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
  display: flex; flex-direction: column; gap: 22px; padding: 18px 14px;
  border-right: 1px solid var(--borderSubtle); background: var(--bgPanel);
}
.hdr {
  position: sticky; top: 0; z-index: 20; height: calc(60px + env(safe-area-inset-top)); padding: env(safe-area-inset-top) max(20px, env(safe-area-inset-right)) 0 max(20px, env(safe-area-inset-left));
  display: flex; align-items: center; gap: 8px;
  border-bottom: 1px solid var(--borderSubtle); background: var(--glassSurface);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
}

/* Workspaces: 12-col grid filling the viewport; vault scrolls naturally */
.ws {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: minmax(0, 1fr);
  gap: 16px; padding: 20px; height: calc(100vh - 60px); min-height: 720px;
}
.ws.flow { height: auto; min-height: 0; grid-template-rows: auto; }
.c3 { grid-column: span 3; } .c4 { grid-column: span 4; } .c5 { grid-column: span 5; } .c6 { grid-column: span 6; }
.c7 { grid-column: span 7; } .c8 { grid-column: span 8; } .c12 { grid-column: 1 / -1; }
.mob-tog, .dock, .mob-logo { display: none; }

@media (max-width: 1023px) {
  .shell { grid-template-columns: minmax(0, 1fr); }
  .rail { display: none; }
  .hdr { height: calc(56px + env(safe-area-inset-top)); padding: env(safe-area-inset-top) 12px 0; }
  .hdr .hdr-title, .hdr .pro-badge, .hdr .share-label { display: none; }
  .mob-logo { display: grid; }
  .ws { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; height: auto; min-height: 0; gap: 12px; padding: 12px; }
  .ws > .panel { grid-column: 1 / -1 !important; }
  .ws > .panel.mob-off { display: none !important; }
  .mob-tog { display: grid; grid-column: 1 / -1; }
  .dock {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; height: calc(64px + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom);
    display: grid; grid-template-columns: repeat(4, 1fr);
    background: var(--glassSurface); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-top: 1px solid var(--borderSubtle);
  }
  .notes { padding: 32px 16px 24px !important; }
  footer.foot { padding-bottom: 88px !important; }
}