/* Copyright (C) 2024 Raymond Sun - All Rights Reserved */

/* ── Big Picture essay container ────────────────────────────────────────── */
#big-picture-box-content {
  width: 100%;
  padding: 24px 28px 48px;
  font-family: inherit;
  box-sizing: border-box;
}

/* ── Intro section (Claude-generated <p> tags) ───────────────────────────── */
.bp-intro p {
  font-size: 15.5px;
  color: #1f2937;
  line-height: 1.85;
  margin: 0 0 18px 0;
}

.bp-intro strong,
.bp-intro b {
  font-weight: 700;
  color: #111827;
}

.bp-intro em,
.bp-intro i {
  font-style: italic;
}

/* ── Insight body (Claude-generated <p>, <ul>, <li> tags) ───────────────── */
.bp-body p {
  font-size: 15px;
  color: #374151;
  line-height: 1.8;
  margin: 0 0 14px 0;
}

.bp-body p:last-child {
  margin-bottom: 0;
}

.bp-body strong,
.bp-body b {
  font-weight: 600;
  color: #111827;
}

.bp-body em,
.bp-body i {
  font-style: italic;
}

.bp-body ul,
.bp-body ol {
  margin: 0 0 14px 0;
  padding-left: 20px;
}

.bp-body li {
  font-size: 15px;
  color: #374151;
  line-height: 1.75;
  margin-bottom: 6px;
}

/* ── Inline source links ─────────────────────────────────────────────────── */
.bp-intro a,
.bp-body a {
  color: #0d9484;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  transition: color 0.15s ease;
}

.bp-intro a:hover,
.bp-body a:hover {
  color: #0a766b;
}

/* ── Inline SVG charts (essay-only quantitative visuals) ─────────────────── */
.bp-chart {
  margin: 8px 0 24px 42px;
  padding: 16px 18px;
  background: #fafafa;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
}

.bp-chart-title {
  font-size: 13px;
  font-weight: 700;
  color: #111827;
  margin-bottom: 12px;
  line-height: 1.4;
}

.bp-chart svg {
  display: block;
  overflow: visible;
}

.bp-chart-lbl {
  font-size: 12px;
  fill: #374151;
}

.bp-chart-bar {
  fill: #0d9484;
}

.bp-chart-val {
  font-size: 11px;
  font-weight: 700;
  fill: #0d9484;
}

.bp-chart-src {
  font-size: 11px;
  color: #9ca3af;
  margin-top: 10px;
}

.bp-chart-src a {
  color: #9ca3af;
  text-decoration: underline;
}

.bp-chart-src a:hover {
  color: #0d9484;
}

/* ── Mobile ──────────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  #big-picture-box-content {
    padding: 16px 10px 40px;
  }

  .bp-intro p {
    font-size: 14.5px;
  }

  .bp-body p,
  .bp-body li {
    font-size: 14px;
  }

  .bp-chart {
    margin-left: 0;
    padding: 12px 14px;
  }
}