/* site/public/styles/global.css */

/* ── Reset & Base ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: #e5e7eb;
  background: #0d0d0d;
}

body {
  max-width: 760px;
  margin: 0 auto;
  padding: 1.5rem 1rem 4rem;
}

a { color: #60a5fa; }
a:hover { color: #93c5fd; }

h1, h2, h3 {
  line-height: 1.25;
  margin-top: 2rem;
  margin-bottom: 0.5rem;
}
h1 { font-size: 1.75rem; margin-top: 0; }
h2 { font-size: 1.25rem; border-bottom: 1px solid #1f2937; padding-bottom: 0.25rem; color: #9ca3af; text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.9rem; }

p { margin: 0.5rem 0; }
ul { padding-left: 1.25rem; margin: 0.5rem 0; }

footer {
  margin-top: 4rem;
  padding-top: 1rem;
  border-top: 1px solid #1f2937;
  font-size: 0.85rem;
  color: #6b7280;
}
footer a { color: #6b7280; }

/* ── Breadcrumb ───────────────────────────────────────────────── */
.breadcrumb {
  font-size: 0.875rem;
  margin-bottom: 1.5rem;
  color: #6b7280;
}
.breadcrumb a { color: #6b7280; text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }

/* ── Business / ticker header ─────────────────────────────────── */
.biz-header { margin-bottom: 1.5rem; }

.biz-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

/* ── Tags ─────────────────────────────────────────────────────── */
.tag {
  display: inline-block;
  padding: 0.2em 0.6em;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 500;
  text-transform: capitalize;
}
.tag.type    { background: #0f2040; color: #7dd3fc; }
.tag.price   { background: #0d2010; color: #6ee7b7; }
.tag.rating  { background: #1c1917; color: #a8a29e; border: 1px solid #292524; }

/* ── Verdict block ────────────────────────────────────────────── */
.verdict {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1rem 1.25rem;
  border-radius: 10px;
  margin: 1.5rem 0;
  border: 1.5px solid transparent;
}
.verdict-icon { font-size: 1.75rem; line-height: 1; }
.verdict p { margin: 0.2rem 0 0; font-size: 0.95rem; color: #cbd5e1; }

.verdict-bullish  { background: #052e16; border-color: #22c55e; }
.verdict-neutral  { background: #0c1a30; border-color: #3b82f6; }
.verdict-caution  { background: #1a1000; border-color: #f59e0b; }
.verdict-bearish  { background: #1a0a0a; border-color: #ef4444; }

/* ── Chart ────────────────────────────────────────────────────── */
.chart-wrap {
  margin: 1.5rem 0;
  border: 1px solid #1f2937;
  border-radius: 8px;
  overflow: hidden;
}
.chart-wrap img {
  display: block;
  width: 100%;
  height: auto;
}

/* ── At-a-glance grid ─────────────────────────────────────────── */
.glance {
  background: #0a0a0a;
  border: 1px solid #1f2937;
  border-radius: 8px;
  padding: 1rem 1.25rem;
  margin: 1rem 0;
}

.glance-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 0.75rem 1.5rem;
}

.glance-item { display: flex; flex-direction: column; }

.glance-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #6b7280;
}

.glance-value {
  font-size: 1.1rem;
  font-weight: 600;
  color: #f9fafb;
}

.pos-text { color: #4ade80; }
.neg-text { color: #f87171; }

/* ── Index page ───────────────────────────────────────────────── */
.index-header { margin-bottom: 2rem; }

.search-wrap {
  margin-top: 1rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

#ticker-search {
  flex: 1;
  min-width: 220px;
  max-width: 480px;
  padding: 0.6rem 1rem;
  font-size: 1rem;
  background: #111827;
  color: #e5e7eb;
  border: 1.5px solid #374151;
  border-radius: 8px;
  outline: none;
  transition: border-color 0.15s;
}
#ticker-search::placeholder { color: #6b7280; }
#ticker-search:focus { border-color: #3b82f6; }

.search-count {
  font-size: 0.85rem;
  color: #6b7280;
  white-space: nowrap;
}

/* ── Ticker list (index page) ─────────────────────────────────── */
.ticker-list {
  list-style: none;
  padding: 0;
  margin: 0.5rem 0 1.5rem;
}

.ticker-list-item { border-bottom: 1px solid #1f2937; }
.ticker-list-item:last-child { border-bottom: none; }

.ticker-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.55rem 0.25rem;
  text-decoration: none;
  color: inherit;
  transition: background 0.1s;
  border-radius: 6px;
}
.ticker-row:hover { background: #111827; }

.ticker-symbol {
  font-weight: 700;
  font-size: 0.95rem;
  min-width: 60px;
  color: #f9fafb;
}

.ticker-name {
  flex: 1;
  font-size: 0.9rem;
  color: #9ca3af;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Verdict badges (index list) ──────────────────────────────── */
.verdict-badge {
  display: inline-block;
  padding: 0.15em 0.55em;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.verdict-badge.bullish { background: #052e16; color: #4ade80; }
.verdict-badge.neutral { background: #0c1a30; color: #60a5fa; }
.verdict-badge.caution { background: #1a1000; color: #fbbf24; }
.verdict-badge.bearish { background: #2d0a0a; color: #f87171; }

/* ── Return badge (index list) ────────────────────────────────── */
.return-badge {
  font-size: 0.82rem;
  font-weight: 600;
  min-width: 56px;
  text-align: right;
}
.return-badge.pos { color: #4ade80; }
.return-badge.neg { color: #f87171; }

/* ── Affiliate CTAs ───────────────────────────────────────────── */
.affiliate-ctas { margin-top: 2rem; }

.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 0.75rem;
}

.cta-btn {
  display: inline-block;
  padding: 0.65rem 1.25rem;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  color: #fff;
  transition: opacity 0.15s;
}
.cta-btn:hover { opacity: 0.88; color: #fff; }

.cta-primary   { background: #1a56db; }   /* Webull blue */
.cta-secondary { background: #111827; }   /* moomoo dark */
.cta-tertiary  { background: #00c805; color: #fff; }  /* Robinhood green */

/* ── Narrative paragraph ──────────────────────────────────────── */
.biz-fullname {
  font-size: 1rem;
  color: #6b7280;
  margin: 0.2rem 0 0.75rem;
  font-weight: 400;
}
.seo-lede {
  font-size: 1rem;
  line-height: 1.7;
  color: #cbd5e1;
  margin: 1rem 0 1.25rem;
  padding: 0.75rem 1rem;
  background: #0c1f30;
  border-left: 3px solid #0ea5e9;
  border-radius: 0 6px 6px 0;
}
.seo-lede strong { color: #7dd3fc; }
.narrative {
  background: #0f172a;
  border-left: 3px solid #3b82f6;
  padding: 0.85rem 1rem;
  border-radius: 0 6px 6px 0;
  margin: 1.25rem 0;
  font-size: 0.95rem;
  line-height: 1.75;
  color: #cbd5e1;
}

/* ── $10K callout ─────────────────────────────────────────────── */
.callout-stat {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  background: #052e16;
  border: 1px solid #166534;
  border-radius: 10px;
  padding: 0.9rem 1.25rem;
  margin: 1.25rem 0;
}
.callout-stat .callout-label {
  font-size: 0.9rem;
  color: #94a3b8;
}
.callout-stat .callout-value {
  font-size: 1.25rem;
  font-weight: 700;
  color: #4ade80;
  margin-left: auto;
}
.callout-stat.neg                 { background: #1a0a0a; border-color: #7f1d1d; }
.callout-stat.neg .callout-value  { color: #f87171; }

/* ── Signal scorecard ─────────────────────────────────────────── */
.signal-card {
  border: 1px solid #1f2937;
  border-radius: 10px;
  overflow: hidden;
  margin: 0.75rem 0 1.25rem;
  background: #0a0a0a;
}
.signal-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 1rem;
  font-size: 0.9rem;
  border-bottom: 1px solid #111827;
  color: #d1d5db;
}
.signal-row:last-child { border-bottom: none; }
.signal-dot {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  font-weight: 700;
  flex-shrink: 0;
}
.signal-row.pass .signal-dot { background: #052e16; color: #4ade80; }
.signal-row.fail .signal-dot { background: #3b0a0a; color: #f87171; }
.signal-row.warn .signal-dot { background: #2a1506; color: #fb923c; }
.signal-row.na   .signal-dot { background: #1f2937; color: #6b7280; }

/* ── Viz grid (range bar + RSI side by side) ──────────────────── */
.viz-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin: 1.25rem 0;
}
@media (max-width: 540px) { .viz-grid { grid-template-columns: 1fr; } }

/* ── Shared gauge shell ───────────────────────────────────────── */
.range-wrap,
.rsi-wrap {
  background: #0a0a0a;
  border: 1px solid #1f2937;
  border-radius: 10px;
  padding: 0.85rem 1rem;
}
.viz-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #6b7280;
  margin-bottom: 0.5rem;
}
.viz-header strong {
  font-size: 1rem;
  font-weight: 700;
  color: #f9fafb;
  text-transform: none;
  letter-spacing: 0;
}

/* Track + thumb (used by both gauges) */
.gauge-wrap   { position: relative; height: 8px; margin: 0.5rem 0 0.4rem; }
.gauge-track  { position: absolute; inset: 0; border-radius: 999px; overflow: hidden; }
.gauge-thumb  {
  position: absolute;
  top: 0;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #e5e7eb;
  border: 2px solid #0d0d0d;
  box-shadow: 0 1px 3px rgba(0,0,0,.6);
  transform: translate(-50%, -3px);
}
.bar-labels {
  display: flex;
  justify-content: space-between;
  font-size: 0.75rem;
  color: #9ca3af;
  margin-top: 0.4rem;
}

/* ── Skeptic Check ────────────────────────────────────────────── */
.skeptic-wrap { margin: 2rem 0; }

.skeptic-btn {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  padding: 1rem 1.25rem;
  background: linear-gradient(135deg, #1e1b4b 0%, #2e1065 100%);
  border: 1.5px solid #7c3aed;
  border-radius: 12px;
  color: #c4b5fd;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  text-align: left;
  letter-spacing: 0.02em;
  transition: all 0.2s;
  box-shadow: 0 0 18px rgba(124,58,237,.12);
}
.skeptic-btn:hover,
.skeptic-wrap.open .skeptic-btn {
  border-color: #a78bfa;
  box-shadow: 0 0 28px rgba(124,58,237,.28);
  color: #ddd6fe;
}
.skeptic-btn-icon { font-size: 1.25rem; flex-shrink: 0; }
.skeptic-btn-text { flex: 1; }
.skeptic-btn-chevron {
  font-size: 0.75rem;
  transition: transform 0.2s;
  color: #7c3aed;
}
.skeptic-wrap.open .skeptic-btn-chevron { transform: rotate(180deg); }

.skeptic-body {
  border: 1.5px solid #4c1d95;
  border-top: none;
  border-radius: 0 0 12px 12px;
  background: #0d0818;
  padding: 1.25rem;
  color: #d1d5db;
}
.skeptic-intro {
  font-size: 0.9rem;
  color: #9ca3af;
  margin-bottom: 1rem;
}

/* Accuracy badge */
.accuracy-badge {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 0.9rem 1.1rem;
  border-radius: 10px;
  margin-bottom: 1.25rem;
  font-size: 0.9rem;
}
.accuracy-badge-label {
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.02em;
}
.accuracy-badge-msg { color: inherit; opacity: 0.9; line-height: 1.5; }

.accuracy-accurate { background: #052e16; border: 1px solid #166534; color: #4ade80; }
.accuracy-partial  { background: #2a1d06; border: 1px solid #92400e; color: #fbbf24; }
.accuracy-missed   { background: #2d0a0a; border: 1px solid #7f1d1d; color: #f87171; }
.accuracy-neutral  { background: #0f172a; border: 1px solid #1e3a5f; color: #93c5fd; }

/* Historical sections */
.hist-section { margin-bottom: 1.25rem; }
.hist-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #6b7280;
  margin: 0 0 0.6rem;
}
.hist-verdict {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  background: #111827;
  border-radius: 8px;
  margin-bottom: 0.6rem;
}
.hist-verdict-icon { font-size: 1.25rem; line-height: 1; }
.hist-verdict strong { color: #f9fafb; font-size: 0.95rem; }
.hist-verdict p { margin: 0.2rem 0 0; font-size: 0.85rem; color: #9ca3af; }

.hist-signals { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.hist-chip {
  display: inline-block;
  padding: 0.25em 0.7em;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
}
.hist-chip.pass { background: #052e16; color: #4ade80; }
.hist-chip.fail { background: #2d0a0a; color: #f87171; }
.hist-chip.warn { background: #2a1506; color: #fb923c; }

.hist-outcome {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border-radius: 8px;
}
.hist-outcome.pos { background: #052e16; border: 1px solid #166534; }
.hist-outcome.neg { background: #2d0a0a; border: 1px solid #7f1d1d; }
.hist-outcome-num {
  font-size: 1.5rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.hist-outcome.pos .hist-outcome-num { color: #4ade80; }
.hist-outcome.neg .hist-outcome-num { color: #f87171; }
.hist-outcome-label { font-size: 0.85rem; color: #9ca3af; }