/* Trading agents dashboard: terminal palette on a Swiss grid of hairlines. Dark only. */

@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/vendor/jetbrains-mono-400.woff2?v=1jls5g1") format("woff2");
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/vendor/jetbrains-mono-500.woff2?v=1tf4v23") format("woff2");
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/vendor/jetbrains-mono-700.woff2?v=mffbgu") format("woff2");
}
@font-face {
  font-family: "Inter Tight";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("/vendor/inter-tight-800.woff2?v=118advn") format("woff2");
}

:root {
  color-scheme: dark;
  --bg: #07090A;
  --ink: #D7DED9;
  --ink-2: #A9B5AE;
  --white: #FFFFFF;
  --muted: #6B7A72;
  --hair: #1E2622;
  --hair-2: #141A17;
  --accent: #FFB000;
  --up: #3DDC84;
  --down: #FF6B5E;
  --bench: #56635C;
  --ag-1: #FFB000;
  --ag-2: #4FC3F7;
  --ag-3: #FF6EC7;
  --ag-4: #C9D1CC;
  --ag-5: #3DDC84;
  --ag-6: #B39DFF;
  --ag-7: #FF8A3D;
  --ag-8: #7FD1B9;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --display: "Inter Tight", "JetBrains Mono", system-ui, sans-serif;
}

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

html {
  -webkit-text-size-adjust: 100%;
  background: var(--bg);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 13px/1.5 var(--mono);
  overflow-x: hidden;
}

a {
  color: var(--ink);
  text-underline-offset: 3px;
}

a:hover {
  color: var(--accent);
}

h1,
h2,
p {
  margin: 0;
}

.page {
  max-width: 1280px;
  margin: 0 auto;
  padding: 24px 40px 48px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

main {
  display: flex;
  flex-direction: column;
  gap: 44px;
  min-width: 0;
}

.label,
.muted {
  color: var(--muted);
}

.label {
  letter-spacing: 0.08em;
}

.up {
  color: var(--up);
}

.down {
  color: var(--down);
}

.warn {
  color: var(--accent);
}

.nowrap {
  white-space: nowrap;
}

.ag-1 { color: var(--ag-1); }
.ag-2 { color: var(--ag-2); }
.ag-3 { color: var(--ag-3); }
.ag-4 { color: var(--ag-4); }
.ag-5 { color: var(--ag-5); }
.ag-6 { color: var(--ag-6); }
.ag-7 { color: var(--ag-7); }
.ag-8 { color: var(--ag-8); }
.bench { color: var(--muted); }

.sq {
  display: inline-block;
  flex: none;
  width: 10px;
  height: 10px;
  margin-right: 8px;
  background: currentColor;
  vertical-align: -1px;
}

.sq.bench {
  background: var(--bench);
}

/* Masthead and footer */

.masthead {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 4px 24px;
  border-top: 4px solid var(--accent);
  padding-top: 12px;
}

.wordmark {
  color: var(--accent);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-decoration: none;
}

.dayline {
  color: var(--muted);
  letter-spacing: 0.08em;
}

.nav {
  display: flex;
  gap: 20px;
  letter-spacing: 0.08em;
}

.nav a {
  padding: 8px 0;
  text-decoration: none;
}

.nav a.active {
  color: var(--accent);
}

.footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
  border-top: 4px solid var(--accent);
  padding-top: 12px;
  color: var(--muted);
  font-size: 12px;
  letter-spacing: 0.06em;
}

.footer-links {
  display: flex;
  gap: 20px;
}

.footer-meta {
  flex-basis: 100%;
  color: #3F4B45;
  font-size: 11px;
}

.loading {
  color: var(--muted);
  letter-spacing: 0.1em;
}

/* Banner */

.banner {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 24px;
  align-items: baseline;
  padding: 10px 14px;
  border: 1px solid var(--down);
  border-left-width: 4px;
  color: var(--down);
  font-size: 12px;
  letter-spacing: 0.08em;
}

.banner a {
  color: var(--down);
  margin-left: auto;
}

/* Status line */

.status-line {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 40px;
  border-top: 1px solid var(--hair);
  padding-top: 12px;
  font-size: 12px;
  letter-spacing: 0.06em;
}

.status-line a {
  text-decoration: none;
}

/* Blocks */

.block {
  display: flex;
  flex-direction: column;
  gap: 12px;
  border-top: 1px solid var(--hair);
  padding-top: 18px;
  min-width: 0;
  margin: 0;
}

.block h2,
.fig-head h2 {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--accent);
}

.h2-sub {
  color: var(--muted);
  font-weight: 400;
}

.empty {
  color: var(--muted);
  letter-spacing: 0.08em;
  padding: 8px 0;
}

.note-line {
  color: var(--muted);
  font-size: 11px;
  letter-spacing: 0.06em;
}

main > .note-line {
  margin-top: -32px;
}

/* Agent columns */

.agent-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  border-top: 1px solid var(--hair);
}

.agent-col {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  padding: 18px 20px 22px;
  border-right: 1px solid var(--hair);
}

.agent-col:first-child {
  padding-left: 0;
}

.agent-col:last-child {
  border-right: 0;
  padding-right: 0;
}

.agent-link {
  display: flex;
  align-items: center;
  padding: 6px 0;
  letter-spacing: 0.1em;
  text-decoration: none;
}

.agent-link:hover {
  color: var(--white);
}

.big {
  font-family: var(--display);
  font-weight: 800;
  font-size: 60px;
  line-height: 0.95;
  letter-spacing: -0.04em;
  color: var(--white);
  font-variant-numeric: lining-nums;
}

.big.down {
  color: var(--down);
}

.big.none {
  color: var(--muted);
}

.spark {
  display: block;
  width: 100%;
  height: 52px;
}

.kvs {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
}

.kv {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--hair-2);
}

.kv:last-child {
  border-bottom: 0;
}

.quote {
  color: var(--ink-2);
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Charts */

.figure {
  gap: 14px;
}

.fig-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px 16px;
}

.readout {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.ro-day {
  color: var(--muted);
  min-width: 5.5ch;
}

.ro-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.ro-val {
  color: var(--ink);
}

.key {
  display: inline-block;
  width: 14px;
  height: 0;
  border-top: 2px solid currentColor;
}

.key-dot {
  border-top: 2px dotted var(--bench);
}

.key-dash {
  border-top: 2px dashed var(--bench);
}

.chart {
  width: 100%;
  min-width: 0;
}

.uplot {
  width: 100% !important;
  font-family: var(--mono);
}

.u-hz .u-cursor-x {
  border-right: 1px solid #34433B;
}

.u-select {
  background: transparent;
}

.fig-note {
  color: var(--muted);
  font-size: 11px;
  letter-spacing: 0.06em;
}

/* Tables */

.scroll {
  overflow-x: auto;
  max-width: 100%;
  -webkit-overflow-scrolling: touch;
}

.scroll:focus-visible {
  outline: 1px solid var(--accent);
}

.grid-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.grid-table thead th {
  padding: 8px 12px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-align: left;
  white-space: nowrap;
}

.grid-table td,
.grid-table tbody th {
  padding: 12px;
  border-top: 1px solid var(--hair);
  text-align: left;
  vertical-align: top;
  font-weight: 400;
}

.grid-table th:first-child,
.grid-table td:first-child {
  padding-left: 0;
}

.grid-table th:last-child,
.grid-table td:last-child {
  padding-right: 0;
}

.grid-table .num {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.grid-table .ticker {
  padding-top: 8px;
  font-family: var(--display);
  font-weight: 800;
  font-size: 20px;
  line-height: 1.2;
  color: var(--white);
  white-space: nowrap;
}

.ticker-sm {
  font-family: var(--display);
  font-weight: 800;
  font-size: 15px;
  color: var(--white);
  white-space: nowrap;
}

.grid-table .thesis {
  color: var(--ink-2);
  min-width: 22em;
  max-width: 60em;
  overflow-wrap: anywhere;
}

.orig {
  margin-top: 6px;
  color: var(--muted);
}

.grid-table .wrap {
  min-width: 16em;
  white-space: normal;
}

table.positions {
  min-width: 760px;
}

table.standings {
  min-width: 1000px;
}

table.standings tbody th {
  white-space: nowrap;
  letter-spacing: 0.06em;
}

table.standings tbody th a {
  text-decoration: none;
}

table.standings tr.bench-row > * {
  color: var(--muted);
}

table.standings tr.bench-row:first-of-type > *,
table.standings tr:not(.bench-row) + tr.bench-row > * {
  border-top-color: #34433B;
}

table.pairs tbody th {
  white-space: nowrap;
  letter-spacing: 0.06em;
}

tr.trade > * {
  border-bottom: 0;
}

tr.detail td {
  border-top: 0;
  padding-top: 0;
}

.detail-body {
  position: sticky;
  left: 0;
  max-width: min(80ch, calc(100vw - 40px));
}

details > summary {
  cursor: pointer;
  color: var(--muted);
  font-size: 11px;
  letter-spacing: 0.1em;
}

details > summary:hover {
  color: var(--accent);
}

.detail-body[open] {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-bottom: 10px;
}

.detail-body .thesis {
  color: var(--ink-2);
  overflow-wrap: anywhere;
}

.detail-body .label {
  font-size: 11px;
}

details.more {
  margin-top: 8px;
}

details.more[open] > .scroll {
  margin-top: 8px;
}

.plain {
  margin: 0;
  padding-left: 18px;
}

.sources,
.chain {
  margin: 0;
  padding-left: 26px;
  overflow-wrap: anywhere;
}

.sources li,
.chain li {
  margin: 3px 0;
}

.chain .sources {
  padding-left: 0;
  list-style: none;
  font-size: 11px;
}

.src-domain {
  font-weight: 700;
}

.src-path {
  color: var(--muted);
}

a .src-path {
  color: inherit;
  opacity: 0.7;
}

.src-answer {
  color: var(--muted);
  font-size: 11px;
}

/* Agent page */

.switcher {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 24px;
  letter-spacing: 0.1em;
  font-size: 12px;
}

.switcher a {
  display: inline-flex;
  align-items: center;
  padding: 6px 0;
  border-bottom: 2px solid transparent;
  text-decoration: none;
  opacity: 0.65;
}

.switcher a.active {
  border-bottom-color: currentColor;
  opacity: 1;
}

.switcher a:hover {
  opacity: 1;
}

main > .switcher {
  margin-bottom: -24px;
}

.agent-head {
  display: flex;
  flex-direction: column;
  gap: 14px;
  border-top: 1px solid var(--hair);
  padding-top: 18px;
}

.agent-title {
  display: flex;
  align-items: center;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.14em;
}

.desc {
  color: var(--muted);
}

.hero {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr);
  gap: 20px 40px;
  align-items: start;
}

.cells {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  border-top: 1px solid var(--hair);
  border-left: 1px solid var(--hair);
}

.cell {
  padding: 10px 12px;
  border-right: 1px solid var(--hair);
  border-bottom: 1px solid var(--hair);
  min-width: 0;
}

.cell .label {
  font-size: 11px;
}

.cell-value {
  font-size: 15px;
  font-weight: 500;
  overflow-wrap: anywhere;
}

.cells-wide {
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
}

.cell-sub {
  color: var(--muted);
  font-size: 11px;
}

.meter {
  position: relative;
  display: block;
  height: 6px;
  margin: 6px 0;
  background: var(--hair);
}

.meter-fill {
  position: absolute;
  inset: 0 auto 0 0;
  background: var(--accent);
}

.meter-proj {
  position: absolute;
  top: -3px;
  bottom: -3px;
  width: 2px;
  margin-left: -1px;
  background: var(--ink);
}

.meter-proj.over {
  background: var(--down);
}

.chart-small {
  margin-top: -4px;
}

.two-col {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 44px 40px;
}

@media (min-width: 960px) {
  .two-col {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

.files {
  display: flex;
  flex-direction: column;
}

.file {
  border-top: 1px solid var(--hair-2);
}

.file > summary {
  padding: 10px 0;
  font-size: inherit;
  letter-spacing: 0;
}

.file > summary.ticker-sm {
  color: var(--white);
}

.file .prose {
  padding: 0 0 14px;
}

.terse {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  max-width: 100ch;
}

.terse li {
  padding: 8px 0;
  border-top: 1px solid var(--hair-2);
  letter-spacing: 0.04em;
}

.terse li:first-child {
  border-top: 0;
  padding-top: 0;
}

.terse a {
  text-decoration: none;
}

/* Markdown written by the agents */

.prose {
  max-width: 80ch;
  color: var(--ink-2);
  overflow-wrap: anywhere;
}

.prose > * {
  margin: 0 0 0.7em;
}

.prose > :last-child {
  margin-bottom: 0;
}

.prose h1,
.prose h2,
.prose h3,
.prose h4 {
  margin-top: 1.2em;
  color: var(--ink);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.prose > h1:first-child,
.prose > h2:first-child,
.prose > h3:first-child {
  margin-top: 0;
}

.prose strong {
  color: var(--ink);
}

.prose ul,
.prose ol {
  padding-left: 18px;
}

.prose blockquote {
  margin-left: 0;
  padding-left: 12px;
  border-left: 2px solid var(--hair);
}

.prose pre {
  overflow-x: auto;
  padding: 10px 12px;
  background: #0B0F0D;
  border: 1px solid var(--hair);
  white-space: pre-wrap;
}

.prose code {
  color: var(--ink);
}

.prose table {
  display: block;
  overflow-x: auto;
  border-collapse: collapse;
}

.prose th,
.prose td {
  padding: 4px 12px 4px 0;
  border-bottom: 1px solid var(--hair);
  text-align: left;
}

.prose hr {
  border: 0;
  border-top: 1px solid var(--hair);
}

.prose a {
  color: var(--ink);
}

/* Phone */

@media (max-width: 720px) {
  .page {
    padding: 16px 16px 40px;
    gap: 24px;
  }
  main {
    gap: 36px;
  }
  main > .note-line {
    margin-top: -26px;
  }
  .nav {
    order: 3;
    flex-basis: 100%;
    gap: 14px;
    font-size: 12px;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .nav a {
    white-space: nowrap;
  }
  .status-line {
    gap: 6px 24px;
  }
  .agent-cols {
    grid-template-columns: minmax(0, 1fr);
  }
  .agent-col,
  .agent-col:first-child,
  .agent-col:last-child {
    padding: 16px 0 18px;
    border-right: 0;
    border-bottom: 1px solid var(--hair);
  }
  .big {
    font-size: 52px;
  }
  .hero {
    grid-template-columns: minmax(0, 1fr);
  }
  .cells {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  main > .switcher {
    margin-bottom: -18px;
  }
}

@media (forced-colors: active) {
  .sq,
  .meter-fill {
    forced-color-adjust: none;
  }
}