/* Claude Earnings Whisper — dark-mode finance aesthetic
   Monospace for numbers. Sans-serif for prose. High-contrast type. */

:root {
  --bg:        #0e1116;
  --bg-card:   #161b22;
  --bg-card-2: #1d242d;
  --border:    #262d36;
  --border-strong: #3a4350;
  --fg:        #e6edf3;
  --fg-dim:    #8b98a5;
  --fg-faint:  #4a5564;
  --accent:    #d4af37;         /* gold */
  --accent-dim:#8a7428;
  --win:       #3fb950;         /* Claude wins: green */
  --loss:      #f85149;         /* Street wins: red  */
  --tie:       #d29922;         /* tie: amber */
  --pending:   #6e7681;
  --up:        #3fb950;
  --down:      #f85149;
  --flat:      #d29922;
  --font-sans: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;
  --max-w:     1100px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  line-height: 1.55;
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

.mono { font-family: var(--font-mono); font-feature-settings: "tnum" 1; }
.small { font-size: 0.85em; }
.muted { color: var(--fg-dim); }
.num { text-align: right; }

/* Header */
.site-header {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 1.25rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--border);
}
.brand { display: flex; align-items: center; gap: 0.75rem; color: var(--fg); }
.brand:hover { text-decoration: none; }
.brand-logo { width: 40px; height: 40px; border-radius: 6px; }
.brand-text { display: flex; flex-direction: column; line-height: 1.2; }
.brand-name { font-weight: 700; letter-spacing: 0.01em; }
.brand-tag  { color: var(--fg-dim); font-size: 0.8rem; }
.site-nav a { margin-left: 1.25rem; color: var(--fg-dim); font-size: 0.95rem; }
.site-nav a:hover { color: var(--fg); text-decoration: none; }

/* Main */
.site-main {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 2rem 1.5rem 4rem;
}

/* Hero / scoreboard */
.hero h1 {
  font-size: 2.4rem;
  margin: 0 0 0.5rem;
  letter-spacing: -0.02em;
}
.hero h1 .mono { color: var(--accent); }
.hero-sub {
  color: var(--fg-dim);
  max-width: 60ch;
  margin: 0 0 1.5rem;
}

.scoreboard {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 1rem;
  align-items: stretch;
  margin: 2rem 0 1rem;
}
.score-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1.25rem 1.5rem;
}
.score-card.score-claude { border-color: var(--accent-dim); }
.score-card.score-street { border-color: var(--border-strong); }
.score-label {
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--fg-dim);
  font-size: 0.75rem;
  margin-bottom: 0.4rem;
}
.score-big {
  font-family: var(--font-mono);
  font-size: 2rem;
  font-weight: 600;
}
.score-unit { color: var(--fg-dim); font-size: 1rem; font-weight: 400; }
.score-foot { color: var(--fg-dim); font-size: 0.85rem; margin-top: 0.5rem; }
.score-vs {
  align-self: center;
  color: var(--fg-dim);
  font-weight: 700;
  font-size: 0.9rem;
}

.streak {
  background: var(--bg-card-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.7rem 1rem;
  margin-bottom: 1.5rem;
  font-size: 0.9rem;
}
.streak-label { color: var(--fg-dim); margin-right: 0.6rem; }
.streak-tokens { letter-spacing: 0.25em; font-weight: 700; }
.streak-legend { color: var(--fg-faint); margin-left: 0.6rem; font-size: 0.8rem; }

.hero-stats {
  display: flex;
  gap: 2rem;
  margin: 1.5rem 0 2rem;
}
.hero-stats > div { display: flex; flex-direction: column; }
.stat-num {
  font-family: var(--font-mono);
  font-size: 1.4rem;
  font-weight: 600;
}
.stat-lbl {
  color: var(--fg-dim);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* "Latest scored" hero card — promotes the most recent scored call above
   the feed so a cold visitor sees the proof-point first. */
.latest-scored {
  margin: 2rem 0 1rem;
  padding: 1.25rem 1.5rem;
  background: linear-gradient(180deg, rgba(212,175,55,0.06), var(--bg-card) 70%);
  border: 1px solid var(--accent-dim);
  border-left: 4px solid var(--accent);
  border-radius: 12px;
}
.latest-scored.spot {
  background: linear-gradient(180deg, rgba(212,175,55,0.14), var(--bg-card) 70%);
}
.latest-head {
  display: flex;
  align-items: baseline;
  gap: 0.8rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}
.latest-lbl {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--accent);
  font-size: 0.72rem;
  font-weight: 700;
}
.latest-scored h2 {
  margin: 0;
  font-size: 1.3rem;
  flex: 1;
  min-width: 0;
}
.latest-scored h2 .mono { color: var(--accent); }
.latest-scored h2 a { color: var(--accent); }
.latest-scored h2 a:hover { text-decoration: underline; }
.latest-date { color: var(--fg-dim); margin-left: 0.5rem; font-weight: 400; }
.latest-tags { display: flex; gap: 0.35rem; flex-wrap: wrap; }

.latest-numbers {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  margin-bottom: 0.85rem;
}
.latest-row {
  display: flex;
  align-items: baseline;
  gap: 1.5rem;
  flex-wrap: wrap;
  padding: 0.4rem 0;
  border-bottom: 1px dashed var(--border);
}
.latest-row:last-child { border-bottom: none; }
.latest-metric {
  min-width: 5rem;
  color: var(--fg-dim);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
}
.latest-kv { white-space: nowrap; }
.latest-kv .k {
  color: var(--fg-dim);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-right: 0.3rem;
}
.latest-kv .v-claude { color: var(--accent); font-weight: 600; font-size: 1rem; }
.latest-kv .v-street { color: var(--fg-dim); font-size: 1rem; }
.latest-kv .v-actual { color: var(--fg); font-weight: 700; font-size: 1.05rem; }

.latest-verdict {
  padding: 0.7rem 0.95rem;
  background: rgba(212,175,55,0.1);
  border-left: 3px solid var(--accent);
  border-radius: 4px;
  font-weight: 500;
}
.latest-lesson {
  margin-top: 0.7rem;
  color: var(--fg-dim);
  font-size: 0.9rem;
}
.latest-lesson summary {
  cursor: pointer;
  color: var(--fg-dim);
  list-style: none;
}
.latest-lesson summary::before {
  content: "▸ ";
  color: var(--fg-faint);
}
.latest-lesson[open] summary::before { content: "▾ "; }
.latest-lesson p {
  margin: 0.4rem 0 0;
  padding-left: 0.85rem;
  border-left: 2px solid var(--accent-dim);
  line-height: 1.55;
}

/* Feed — slim, scannable cards */
.feed h2 { font-size: 1.2rem; margin: 2rem 0 1rem; }
.slim-feed { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.5rem; }

.slim {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-left-width: 4px;   /* outcome stripe lives here */
  border-radius: 8px;
  transition: border-color 0.15s ease;
  position: relative;
}
.slim:hover { border-color: var(--border-strong); }
.slim.outside { opacity: 0.94; }

/* Outcome left-stripe — the quick-read signal for "did Claude win this call?" */
.slim.outcome-win     { border-left-color: var(--win); }
.slim.outcome-loss    { border-left-color: var(--loss); }
.slim.outcome-split   { border-left-color: var(--tie); }
.slim.outcome-spot    { border-left-color: var(--accent); }
.slim.outcome-pending { border-left-color: var(--pending); border-style: solid dashed dashed solid; }

.slim-link {
  display: flex;
  flex-direction: column;
  padding: 0.7rem 0.9rem 0.7rem 0.85rem;
  color: var(--fg);
  gap: 0.2rem;
}
.slim-link:hover { text-decoration: none; }

.slim-row {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  flex-wrap: wrap;
  font-size: 0.88rem;
  line-height: 1.5;
}

.slim-head { align-items: center; gap: 0.55rem; }
.slim-ticker { font-weight: 700; color: var(--accent); font-size: 1rem; }
.slim-company { color: var(--fg-dim); font-size: 0.9rem; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.slim-pill {
  font-size: 0.7rem;
  padding: 0.08rem 0.5rem;
  border-radius: 999px;
  border: 1px dashed var(--border-strong);
  color: var(--fg-dim);
  letter-spacing: 0.02em;
}
.slim-date { color: var(--fg-dim); font-size: 0.8rem; }
.slim-tags { display: flex; gap: 0.3rem; flex-wrap: wrap; }

.slim-data { padding-left: 1.6rem; }
.slim-lbl {
  display: inline-block;
  width: 3rem;
  margin-left: -1.6rem;
  color: var(--fg-dim);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 600;
}
.slim-kv { white-space: nowrap; }
.slim-kv .k {
  color: var(--fg-dim);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-right: 0.3rem;
}
.slim-kv .v-claude { color: var(--accent); font-weight: 600; }
.slim-kv .v-street { color: var(--fg-dim); }
.slim-kv .v-actual { color: var(--fg); font-weight: 600; }
.slim-kv .move {
  margin-left: 0.25rem;
  font-weight: 600;
  font-size: 0.92rem;
}
.slim-kv .move-up   { color: var(--up); }
.slim-kv .move-down { color: var(--down); }
.slim-kv .move-3d   { margin-left: 0.2rem; }

.slim-verdict {
  padding-left: 1.6rem;
  color: var(--fg);
  font-size: 0.88rem;
  padding-top: 0.25rem;
}

.feed-more { margin: 1rem 0; font-size: 0.9rem; }

/* Mobile — stack the head row if tight */
@media (max-width: 640px) {
  .slim-data { padding-left: 0; }
  .slim-lbl { display: inline-block; width: auto; margin: 0 0.5rem 0 0; }
  .slim-verdict { padding-left: 0; }
  .slim-company { display: none; }
}

/* Tags */
.tag {
  display: inline-block;
  padding: 0.12rem 0.5rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  border: 1px solid var(--border-strong);
  color: var(--fg-dim);
  background: var(--bg-card-2);
  white-space: nowrap;
}
.tag.small { font-size: 0.7rem; padding: 0.08rem 0.4rem; }
.tag-win     { color: var(--win);  border-color: rgba(63,185,80,0.4);  background: rgba(63,185,80,0.08); }
.tag-loss    { color: var(--loss); border-color: rgba(248,81,73,0.4);  background: rgba(248,81,73,0.08); }
.tag-tie     { color: var(--tie);  border-color: rgba(210,153,34,0.4); background: rgba(210,153,34,0.08); }
.tag-pending { color: var(--pending); border-style: dashed; }
.tag-scored  { color: var(--win); border-color: rgba(63,185,80,0.4); }
.tag-spot    {
  color: #0e1116;
  background: var(--accent);
  border-color: var(--accent);
  font-weight: 700;
}

/* Spot-on banner on the stock page */
.spot-banner {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 1rem 0 1.25rem;
  padding: 1rem 1.25rem;
  background: linear-gradient(90deg, rgba(212,175,55,0.18), rgba(212,175,55,0.05));
  border: 1px solid var(--accent-dim);
  border-left: 4px solid var(--accent);
  border-radius: 10px;
}
.spot-bullseye { font-size: 2.25rem; line-height: 1; }
.spot-headline {
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--fg);
  margin-bottom: 0.15rem;
}
.spot-sub { color: var(--fg-dim); font-size: 0.9rem; }
.spot-vs { display: inline-block; margin-left: 0.6rem; color: var(--fg-dim); }
.spot-inline { color: var(--accent); font-weight: 600; }

.call-detail-tags { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.verdict-errs { margin-left: 0.5rem; color: var(--fg-dim); }

/* Sector table */
.sector-table { margin-top: 2.5rem; }
table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}
thead th {
  text-align: left;
  color: var(--fg-dim);
  font-weight: 600;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0.6rem 0.75rem;
  border-bottom: 1px solid var(--border);
}
tbody td {
  padding: 0.55rem 0.75rem;
  border-bottom: 1px solid var(--border);
}
tbody tr:hover { background: var(--bg-card); }

/* Head-to-head table (used on home cards AND stock pages) */
.h2h-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
  background: var(--bg-card-2);
  border-radius: 8px;
  overflow: hidden;
}
.h2h-table thead th {
  padding: 0.6rem 0.85rem;
  text-align: right;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fg-dim);
  font-weight: 600;
  border-bottom: 1px solid var(--border);
}
.h2h-table thead th:first-child { text-align: left; }
.h2h-table tbody th,
.h2h-table tfoot th {
  text-align: left;
  padding: 0.5rem 0.85rem;
  font-weight: 500;
  color: var(--fg-dim);
  font-size: 0.85rem;
  border-bottom: 1px solid var(--border);
}
.h2h-table tbody td,
.h2h-table tfoot td {
  padding: 0.5rem 0.85rem;
  text-align: right;
  border-bottom: 1px solid var(--border);
}
.h2h-table tfoot td { border-bottom: none; }
.h2h-table tbody tr:last-child td,
.h2h-table tbody tr:last-child th { border-bottom: 1px solid var(--border); }
.h2h-table .col-claude { color: var(--accent); font-weight: 600; }
.h2h-table .col-street { color: var(--fg-dim); }
.h2h-table .col-actual { color: var(--fg); font-weight: 600; }
.h2h-table thead .col-claude { color: var(--accent); }
.h2h-table thead .col-street { color: var(--fg-dim); }
.h2h-table thead .col-actual { color: var(--fg); }
.h2h-table tfoot {
  background: rgba(212,175,55,0.05);
  border-top: 2px solid var(--border-strong);
}
.h2h-table.h2h-full { font-size: 0.95rem; }
.h2h-table.h2h-full thead th,
.h2h-table.h2h-full tbody th,
.h2h-table.h2h-full tfoot th,
.h2h-table.h2h-full tbody td,
.h2h-table.h2h-full tfoot td { padding: 0.7rem 1rem; }

/* Stock page */
.stock-report { }

/* The Call summary (4 tiles at the top of the stock page) */
.call-summary { margin: 1rem 0 1.5rem; }
.call-summary h3 {
  margin: 0 0 0.7rem;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--fg-dim);
}
.summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.75rem;
}
.summary-tile {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.85rem 1rem;
}
.summary-lbl {
  color: var(--fg-dim);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 0.2rem;
}
.summary-val {
  font-family: var(--font-mono);
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--fg);
}
.summary-sub { color: var(--fg-dim); font-size: 0.82rem; margin-top: 0.2rem; }
.conf-high   { color: var(--win); }
.conf-medium { color: var(--accent); }
.conf-low    { color: var(--fg-dim); }

.h2h-section { margin: 1rem 0 1.5rem; }
.h2h-section h3 {
  margin: 0 0 0.7rem;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--fg-dim);
}
.reasoning-list li { margin-bottom: 0.5rem; line-height: 1.5; }
.risk-note { border-color: rgba(248,81,73,0.25); }
.risk-note h3 { color: var(--loss); }
.stock-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1.5rem;
  margin-bottom: 2rem;
  flex-wrap: wrap;
}
.stock-headline h1 {
  font-size: 2rem;
  margin: 0 0 0.5rem;
  letter-spacing: -0.01em;
}
.stock-headline h1 .mono { color: var(--accent); }
.stock-meta { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.pill {
  display: inline-block;
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  background: var(--bg-card);
  color: var(--fg-dim);
  font-size: 0.75rem;
  border: 1px solid var(--border);
}
.pill-index { color: var(--accent); border-color: var(--accent-dim); }
.pill-outside {
  color: var(--fg-dim);
  border-color: var(--border-strong);
  border-style: dashed;
}
.call.outside { opacity: 0.92; }

.stock-scorecard {
  display: flex;
  gap: 1.5rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.8rem 1.25rem;
}
.mini-score { display: flex; flex-direction: column; align-items: center; }
.mini-score-lbl {
  color: var(--fg-dim);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.mini-score-vals { font-size: 1.1rem; font-weight: 600; }

.call-detail { margin-top: 1rem; }
.call-detail-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}
.call-detail-head h2 { font-size: 1.15rem; margin: 0; }

.headtohead {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1rem;
  margin: 1rem 0;
}
.h2h-col {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1.1rem 1.25rem;
}
.h2h-claude { border-color: var(--accent-dim); }
.h2h-street { }
.h2h-actual { border-color: var(--border-strong); }
.h2h-col h3 {
  margin: 0 0 0.8rem;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--fg-dim);
}
.h2h-col dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 0.3rem 0.8rem; }
.h2h-col dt { color: var(--fg-dim); font-size: 0.85rem; }
.h2h-col dd { margin: 0; }

.h2h-verdict {
  display: flex;
  gap: 1rem;
  padding: 0.8rem 1rem;
  background: var(--bg-card-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  margin: 0.5rem 0 1.5rem;
  align-items: center;
}
.verdict-item { display: flex; align-items: center; gap: 0.6rem; }
.verdict-lbl { color: var(--fg-dim); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; }

.analyst-note {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1.2rem 1.5rem;
  margin: 1rem 0;
}
.analyst-note h3 { margin-top: 0; font-size: 1rem; color: var(--fg); }
.analyst-note h4 { color: var(--fg-dim); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.08em; margin-top: 1rem; margin-bottom: 0.25rem; }
.analyst-note ul { padding-left: 1.2rem; }
.analyst-note li { margin-bottom: 0.4rem; }
.peer-read { color: var(--fg-dim); font-size: 0.9rem; }
.verdict-line {
  margin-top: 1rem;
  padding: 0.7rem 1rem;
  background: rgba(212,175,55,0.08);
  border-left: 3px solid var(--accent);
  border-radius: 4px;
  font-weight: 500;
}
.lesson-note { border-color: var(--accent-dim); }

.call-history { margin-top: 2rem; }
.call-history h2 { font-size: 1.1rem; }

/* Archive */
.archive h1 { margin-bottom: 0.4rem; }
.archive-stats { margin: 0 0 1.25rem; color: var(--fg-dim); }
.archive-table tr.pending { opacity: 0.75; }

/* Prose pages (methodology, about) */
.prose { max-width: 70ch; }
.prose h1 { font-size: 2rem; letter-spacing: -0.01em; }
.prose h2 { font-size: 1.2rem; margin-top: 2rem; }
.prose h3 { font-size: 1rem; margin-top: 1.25rem; color: var(--fg); }
.prose p, .prose ul, .prose ol { color: var(--fg); }
.prose ul ul { margin-top: 0.25rem; }
.prose code {
  background: var(--bg-card);
  padding: 0.08rem 0.35rem;
  border-radius: 4px;
  font-size: 0.9em;
}
.prose .lede { font-size: 1.05rem; color: var(--fg); }

/* Footer */
.site-footer {
  max-width: var(--max-w);
  margin: 2rem auto 0;
  padding: 1.5rem 1.5rem 2.5rem;
  border-top: 1px solid var(--border);
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1.5rem;
  color: var(--fg-dim);
  font-size: 0.85rem;
}
.foot-col { display: flex; flex-direction: column; gap: 0.4rem; }
.foot-sub { color: var(--fg-faint); }
.site-footer a { color: var(--fg-dim); }
.site-footer a:hover { color: var(--fg); }

/* Mobile */
@media (max-width: 720px) {
  .site-header { flex-direction: column; gap: 0.75rem; align-items: flex-start; }
  .site-nav a { margin: 0 1rem 0 0; }
  .scoreboard { grid-template-columns: 1fr; }
  .score-vs { text-align: center; }
  .headtohead { grid-template-columns: 1fr; }
  .call-link { grid-template-columns: auto auto 1fr; }
  .call-date { display: none; }
  .stock-head { flex-direction: column; }
  .site-footer { grid-template-columns: 1fr; }
  .archive-table { font-size: 0.8rem; }
  .hero h1 { font-size: 1.8rem; }
}