/* AI Investor Dashboard -- terminal-styled, built on the same design tokens
   as portfolio-site (bg/border/text/accent) for brand consistency across
   the site network. Read-only research dashboard: no forms, no auth, no
   backend -- pure static HTML regenerated daily by publish_site.py. */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:      #080808;
  --bg2:     #101010;
  --bg3:     #161616;
  --border:  #242424;
  --text:    #e8eaed;
  --muted:   #6b7280;
  --accent:  #2060f0;
  --accent2: #00d084;
  --pos:     #00d084;
  --neg:     #f85149;
  --warn:    #d29922;
  --radius:  10px;
  --mono:    'JetBrains Mono', 'SFMono-Regular', Consolas, monospace;
}

html { background: var(--bg); }

body {
  font-family: var(--mono);
  background: var(--bg);
  color: var(--text);
  line-height: 1.55;
  font-size: 14px;
}

body::after {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  background-size: 180px 180px;
  opacity: 0.02;
  pointer-events: none;
  z-index: 9998;
}

a { color: inherit; text-decoration: none; }

/* ── LAYOUT SHELL: horizontal top nav, no sidebar, no collapse ───────── */
.topnav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 0 32px;
  height: 58px;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  background: rgba(8,8,8,0.95);
  backdrop-filter: blur(10px);
  z-index: 60;
}

.topnav-brand {
  display: flex;
  align-items: baseline;
  gap: 8px;
  white-space: nowrap;
}
.topnav-brand-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
}
.topnav-brand-sub {
  font-size: 11px;
  color: var(--muted);
}

.topnav-links {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.nav-link {
  display: inline-block;
  padding: 6px 11px;
  font-size: 13px;
  color: var(--muted);
  border-radius: 6px;
  white-space: nowrap;
  transition: color 0.15s, background 0.15s;
}
.nav-link:hover { color: var(--text); background: rgba(255,255,255,0.04); }
.nav-link.active { color: var(--accent2); background: rgba(0,208,132,0.08); }
.nav-link .prompt { color: var(--muted); margin-right: 3px; }
.nav-link.active .prompt { color: var(--accent2); }

.mobile-toggle {
  display: none;
  background: none;
  border: 1px solid var(--border);
  color: var(--text);
  font-family: var(--mono);
  padding: 6px 12px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
}

.main {
  padding: 32px 40px 80px;
}

.narrative p { max-width: none; }

@media (max-width: 880px) {
  .topnav { flex-wrap: wrap; height: auto; padding: 12px 18px; }
  .topnav-links {
    display: none;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    margin-top: 10px;
  }
  .topnav-links.open { display: flex; }
  .mobile-toggle { display: block; }
  .main { padding: 20px 18px 60px; }
}

/* ── PAGE HEADER ────────────────────────────────────────────────────── */
.page-header {
  margin-bottom: 28px;
}
.cmd-line {
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 6px;
}
.cmd-line .prompt { color: var(--accent2); }
.cmd-line .cmd { color: var(--text); }
.page-title {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.page-desc {
  font-size: 13px;
  color: var(--muted);
  margin-top: 6px;
  max-width: 680px;
  line-height: 1.6;
}

/* ── TERMINAL WINDOW ────────────────────────────────────────────────── */
.term-window {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 24px;
  overflow: hidden;
  max-width: 860px;
}
.term-titlebar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  border-bottom: 1px solid var(--border);
  background: var(--bg3);
}
.term-dots { display: flex; gap: 6px; }
.term-dot { width: 9px; height: 9px; border-radius: 50%; }
.term-dot.r { background: #ff5f56; }
.term-dot.y { background: #ffbd2e; }
.term-dot.g { background: #27c93f; }
.term-titlebar-label {
  font-size: 11px;
  color: var(--muted);
  margin-left: 4px;
}
.term-body { padding: 18px 20px; }
.term-body.tight { padding: 0; }
/* Standalone term-windows that sit above/beside full-width content (e.g.
   Calibration's intro above its 3-column grid, About's lone box) --
   stretch the BOX to match that width. */
.term-window.full { max-width: none; }
.term-window.full .term-body p { max-width: none; }

/* ── STAT ROW ───────────────────────────────────────────────────────── */
.stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}
.stat-box {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px;
}
.stat-label {
  font-size: 10px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 6px;
}
.stat-value {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.stat-sub {
  font-size: 11px;
  color: var(--muted);
  margin-top: 4px;
}

/* ── BRACKET TAGS ───────────────────────────────────────────────────── */
.tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 4px;
  letter-spacing: 0.02em;
}
.tag.pos  { color: var(--pos);  background: rgba(0,208,132,0.1); }
.tag.neg  { color: var(--neg);  background: rgba(248,81,73,0.1); }
.tag.warn { color: var(--warn); background: rgba(210,153,34,0.1); }
.tag.muted{ color: var(--muted);background: rgba(255,255,255,0.04); }
.tag.accent { color: #7ab3ff; background: rgba(32,96,240,0.1); }

/* ── TABLES ─────────────────────────────────────────────────────────── */
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th {
  text-align: left;
  font-size: 10px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 8px 14px;
  border-bottom: 1px solid var(--border);
}
th.num, td.num { text-align: right; font-variant-numeric: tabular-nums; }
td {
  padding: 9px 14px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
tr:last-child td { border-bottom: none; }
tr:hover td { background: rgba(255,255,255,0.015); }
.pos-text { color: var(--pos); }
.neg-text { color: var(--neg); }
.muted-text { color: var(--muted); }

/* ── SECTION LABEL ──────────────────────────────────────────────────── */
.section-label {
  font-size: 11px;
  color: var(--accent2);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 600;
  margin: 28px 0 12px;
}
.section-label:first-child { margin-top: 0; }

/* ── SPLIT 2-COLUMN (headline table | narrative log, 1:1) ────────────── */
.split-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  align-items: stretch;
  margin-bottom: 12px;
}
/* Bare single blocks (not wrapped via stack_blocks()) opt out of the
   stretch -- growing THEIR own border directly is the same dead-space-
   inside-a-box problem as the .paired-row lone-stack case below. Only a
   .stack (which distributes the extra height itself) should stretch. */
.split-2col .term-window { max-width: none; margin-bottom: 0; align-self: start; }
.split-2col > .data-block { margin-bottom: 0; align-self: start; }
@media (max-width: 880px) {
  .split-2col { grid-template-columns: 1fr; }
}

/* ── 1:3 SPLIT (Earnings: Upcoming narrow left, Post-Earnings wide right) ── */
.split-1-3 {
  display: grid;
  grid-template-columns: 1fr 3fr;
  gap: 20px;
  align-items: start;
}
@media (max-width: 880px) {
  .split-1-3 { grid-template-columns: 1fr; }
}

/* ── EQUAL 3-COLUMN (1:1:1, e.g. Signals/Calibration) ─────────────────── */
.grid-3col {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 20px;
  align-items: start;
  margin-bottom: 8px;
}
.grid-3col > .data-block { margin-bottom: 0; }
@media (max-width: 1100px) {
  .grid-3col { grid-template-columns: 1fr; }
}

/* ── PAIRED ROW (1 big block left, a stack of small ones right) ──────── */
/* align-items:stretch so both columns fill the row's full height (set by
   whichever side is naturally taller) instead of each hugging its own
   content -- a shorter column trailing off mid-row is the "Tetris" look.
   A multi-item stack spreads the leftover height as equal gaps between
   its own boxes (space-between), pinning its last box's bottom to the
   row bottom. A stack with only ONE box has no "between" to use, so it
   gets pushed flush to the bottom instead (flex-end) -- that keeps the
   lone box at its own natural height (no dead space stretched inside its
   border, just invisible space above it) while its bottom edge still
   lands on the same line as the taller side. Applies to .split-2col too. */
.paired-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  align-items: stretch;
  margin-bottom: 20px;
}
.paired-row .stack,
.paired-row .col-flow,
.split-2col .stack {
  justify-content: space-between;
}
.paired-row .stack:has(> .data-block:only-child),
.split-2col .stack:has(> .data-block:only-child) {
  justify-content: flex-end;
}
.stack {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
}
.stack .data-block { margin-bottom: 0; }
/* .col-flow (narrative log + a box stack below it) is ALSO a flex column
   now, not a bare block div -- it used to hard-code "never stretch, I'm
   always the taller reference side", which broke once .narrative p lost
   its readable-width cap: on a wide screen the narrative wraps into far
   fewer lines and can end up SHORTER than the stack on the other side,
   and a bare block div can't redistribute leftover space the way a flex
   column can. Making both sides flex columns with the same
   justify-content: space-between rule means whichever side is naturally
   shorter is the one that stretches and grows ITS OWN gap to match --
   the mechanism no longer assumes which physical side is taller. */
.col-flow {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
}
.col-flow .term-window { max-width: none; }
@media (max-width: 880px) {
  .paired-row { grid-template-columns: 1fr; }
}

/* ── BLOCK COLUMNS (masonry) ────────────────────────────────────────── */
/* Several smaller data blocks (a one-line Rates stat, a 3-row Options
   table, etc.) stacking one-per-full-width-row was pure vertical scroll
   with empty space beside each one. CSS multi-column lets the browser
   balance blocks across 2 columns by height automatically -- a bigger
   block (e.g. Sector Breadth) naturally fills one column while 2-3
   smaller ones stack to match its height in the other, without having to
   hand-compute which blocks pair together. */
.block-grid {
  column-count: 2;
  column-gap: 20px;
}
.data-block {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px;
  margin-bottom: 20px;
  break-inside: avoid;
  display: inline-block;
  width: 100%;
}
.data-block .section-label { margin: 0 0 10px; }
.data-block.full { column-span: all; max-width: 900px; }

@media (max-width: 880px) {
  .block-grid { column-count: 1; }
}

/* ── TABS (Deep Analysis: Stocks/Small-Cap/Crypto) ────────────────────── */
.tab-buttons {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 20px;
}
.tab-btn {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 13px;
  padding: 10px 16px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.tab-btn:hover { color: var(--text); }
.tab-btn.active { color: var(--accent2); border-bottom-color: var(--accent2); }

/* ── COLLAPSIBLE CONVICTION GROUPS ─────────────────────────────────────── */
details.conv-group { margin-bottom: 16px; }
details.conv-group summary {
  cursor: pointer;
  font-size: 11px;
  color: var(--accent2);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 600;
  padding: 8px 0;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 7px;
  user-select: none;
}
details.conv-group summary::-webkit-details-marker { display: none; }
details.conv-group summary::before {
  content: '▸';
  display: inline-block;
  transition: transform 0.15s ease;
  font-size: 10px;
}
details.conv-group[open] summary::before { transform: rotate(90deg); }
details.conv-group .card-grid { margin-top: 10px; }

/* ── THESIS / SIGNAL CARD ───────────────────────────────────────────── */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
  gap: 14px;
  margin-bottom: 20px;
  align-items: start;
}
/* Forced exactly 3 across (not auto-fit) for Post-Earnings Review inside
   the wide side of .split-1-3, tapering down at narrower widths. */
.card-grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1400px) { .card-grid.cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 880px) { .card-grid.cols-3 { grid-template-columns: 1fr; } }
.thesis-card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px;
  margin-bottom: 12px;
  background: var(--bg2);
}
.card-grid .thesis-card { margin-bottom: 0; }
.thesis-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  gap: 10px;
  flex-wrap: wrap;
}
.thesis-ticker { font-size: 15px; font-weight: 700; }
.thesis-body { color: var(--text); font-size: 13px; line-height: 1.65; }
.thesis-body b { color: var(--accent2); font-weight: 600; }
.thesis-meta { font-size: 11px; color: var(--muted); margin-bottom: 6px; }

/* ── CURSOR / LIVE ──────────────────────────────────────────────────── */
.cursor-block {
  display: inline-block;
  width: 0.55em;
  height: 1em;
  background: var(--accent2);
  margin-left: 4px;
  vertical-align: text-bottom;
  animation: cursor-blink 1.1s step-end infinite;
}
@keyframes cursor-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }

.last-updated {
  font-size: 12px;
  color: var(--muted);
  margin-top: 4px;
}
.last-updated .dot {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent2);
  margin-right: 6px;
  animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }

/* ── EMPTY STATE ────────────────────────────────────────────────────── */
.empty-state {
  color: var(--muted);
  font-size: 13px;
  padding: 20px 0;
}

/* ── FOOTER ─────────────────────────────────────────────────────────── */
.page-footer {
  margin-top: 48px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
  font-size: 11px;
  color: var(--muted);
  line-height: 1.7;
}
.page-footer a { color: var(--accent2); }
.page-footer a:hover { text-decoration: underline; }

/* ── RESPONSIVE TABLE WRAP ──────────────────────────────────────────── */
.table-scroll { overflow-x: auto; }