/*
 * DCR Rich Content — Scoped typography for DB-rendered HTML
 * Apply class="dcr-rich-content" to any container that outputs raw HTML
 * from the database (executive_summary, report_description, market_scope, etc.)
 *
 * Why scoped: reset.css strips all default browser styles globally
 * (ul list-style:none, margin:0, padding:0, h* font-size:inherit, etc.).
 * This class restores proper rendering using only approved CSS tokens.
 *
 * Rule: NO hardcoded px / hex values — tokens only.
 */

/* ── Base ─────────────────────────────────────────────────────────────────── */

.dcr-rich-content {
  font-family:  var(--font-sans);
  font-size:    var(--text-md);
  font-weight:  var(--fw-normal);
  line-height:  var(--lh-normal);
  color:        var(--text-mid);
}

/* ── Paragraphs ──────────────────────────────────────────────────────────── */

.dcr-rich-content p {
  font-size:     var(--text-md);
  line-height:   var(--lh-loose);
  color:         var(--text-mid);
  margin-bottom: var(--sp-4);
}

.dcr-rich-content p:last-child { margin-bottom: 0; }

/* ── Headings ────────────────────────────────────────────────────────────── */

.dcr-rich-content h1,
.dcr-rich-content h2,
.dcr-rich-content h3,
.dcr-rich-content h4,
.dcr-rich-content h5,
.dcr-rich-content h6 {
  font-family:  var(--font-sans);
  color:        var(--text-dark);
  line-height:  var(--lh-tight);
  margin-top:   var(--sp-8);
  margin-bottom: var(--sp-4);
}

.dcr-rich-content h1:first-child,
.dcr-rich-content h2:first-child,
.dcr-rich-content h3:first-child,
.dcr-rich-content h4:first-child,
.dcr-rich-content h5:first-child,
.dcr-rich-content h6:first-child { margin-top: 0; }

.dcr-rich-content h1 { font-size: var(--text-4xl); font-weight: var(--fw-extrabold); }
.dcr-rich-content h2 { font-size: 1.625rem;         font-weight: var(--fw-bold);      } /* 26px */
.dcr-rich-content h3 { font-size: var(--text-xl);  font-weight: var(--fw-bold);      } /* 20px */
.dcr-rich-content h4 { font-size: var(--text-xl);  font-weight: var(--fw-semibold);  }
.dcr-rich-content h5 { font-size: var(--text-lg);  font-weight: var(--fw-semibold);  }
.dcr-rich-content h6 { font-size: var(--text-base);font-weight: var(--fw-semibold);  }

/* ── Unordered list ──────────────────────────────────────────────────────── */

.dcr-rich-content ul {
  list-style:    disc;
  padding-left:  var(--sp-6);
  margin-bottom: var(--sp-3);
  display:       flex;
  flex-direction: column;
  gap:           var(--sp-3);
}

.dcr-rich-content ul li::marker {
  color:     var(--navy);
  font-size: var(--text-md);
}

/* ── Ordered list ────────────────────────────────────────────────────────── */

.dcr-rich-content ol {
  list-style:    decimal;
  padding-left:  var(--sp-6);
  margin-bottom: var(--sp-3);
  display:       flex;
  flex-direction: column;
  gap:           var(--sp-3);
}

.dcr-rich-content ol li::marker {
  color:       var(--navy);
  font-weight: var(--fw-semibold);
  font-size:   var(--text-md);
}

/* ── List items ──────────────────────────────────────────────────────────── */

.dcr-rich-content li {
  font-size:   var(--text-md);
  line-height: var(--lh-normal);
  color:       var(--text-mid);
}

/* Nested lists */
.dcr-rich-content ul ul,
.dcr-rich-content ol ol,
.dcr-rich-content ul ol,
.dcr-rich-content ol ul {
  list-style:    circle;
  margin-top:    var(--sp-2);
  margin-bottom: 0;
}

.dcr-rich-content ul ul ul { list-style: square; }

/* ── Inline text formatting ──────────────────────────────────────────────── */

.dcr-rich-content strong,
.dcr-rich-content b {
  font-weight: var(--fw-semibold);
  color:       var(--text-dark);
}

.dcr-rich-content em,
.dcr-rich-content i { font-style: italic; }

.dcr-rich-content u { text-decoration: underline; text-underline-offset: 2px; }

.dcr-rich-content s,
.dcr-rich-content del { text-decoration: line-through; opacity: 0.6; }

.dcr-rich-content mark {
  background: var(--tint-warning);
  color:      var(--text-warning-dark);
  padding:    0 3px;
  border-radius: var(--radius-sm);
}

.dcr-rich-content sup,
.dcr-rich-content sub {
  font-size:   var(--text-xs);
  line-height: 0;
  position:    relative;
  vertical-align: baseline;
}

.dcr-rich-content sup { top:    -0.5em; }
.dcr-rich-content sub { bottom: -0.25em; }

/* ── Links ───────────────────────────────────────────────────────────────── */

.dcr-rich-content a {
  color:                  var(--navy);
  text-decoration:        underline;
  text-underline-offset:  2px;
  font-weight:            var(--fw-medium);
  transition:             color 0.15s;
}

.dcr-rich-content a:hover { color: var(--blue); }

/* ── Blockquote ──────────────────────────────────────────────────────────── */

.dcr-rich-content blockquote {
  border-left:  3px solid var(--navy);
  padding:      var(--sp-4) var(--sp-5);
  margin:       var(--sp-6) 0;
  background:   var(--blue-light);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  color:         var(--text-mid);
  font-style:    italic;
}

.dcr-rich-content blockquote p { margin-bottom: 0; }

/* ── Code ────────────────────────────────────────────────────────────────── */

.dcr-rich-content code {
  font-family:   var(--font-mono);
  font-size:     var(--text-md);
  background:    var(--page-bg);
  border:        1px solid var(--card-border);
  border-radius: var(--radius-sm);
  padding:       1px var(--sp-2);
  color:         var(--text-dark);
}

.dcr-rich-content pre {
  font-family:   var(--font-mono);
  font-size:     var(--text-md);
  background:    var(--page-bg);
  border:        1px solid var(--card-border);
  border-radius: var(--radius-md);
  padding:       var(--sp-4) var(--sp-5);
  margin-bottom: var(--sp-4);
  overflow-x:    auto;
  white-space:   pre-wrap;
  word-break:    break-word;
  color:         var(--text-dark);
  line-height:   var(--lh-loose);
}

.dcr-rich-content pre code {
  background: none;
  border:     none;
  padding:    0;
  font-size:  inherit;
}

/* ── Table ───────────────────────────────────────────────────────────────── */

.dcr-rich-content table {
  width:         100%;
  border-collapse: collapse;
  margin-bottom: var(--sp-6);
  font-size:     var(--text-md);
  overflow-x:    auto;
  display:       block;
}

.dcr-rich-content thead { background: var(--blue-light); }

.dcr-rich-content th {
  font-family:   var(--font-sans);
  font-size:     var(--text-md);
  font-weight:   var(--fw-semibold);
  color:         var(--navy);
  padding:       var(--sp-3) var(--sp-4);
  text-align:    left;
  border:        1px solid var(--card-border);
  white-space:   nowrap;
}

.dcr-rich-content td {
  font-family:  var(--font-sans);
  font-size:    var(--text-md);
  color:        var(--text-mid);
  padding:      var(--sp-3) var(--sp-4);
  border:       1px solid var(--card-border);
  vertical-align: top;
  line-height:  var(--lh-normal);
}

.dcr-rich-content tbody tr:nth-child(even) td { background: var(--tint-navy); }
.dcr-rich-content tbody tr:hover td           { background: var(--blue-light); }

/* ── HR ──────────────────────────────────────────────────────────────────── */

.dcr-rich-content hr {
  margin: var(--sp-6) 0;
  border-top: 1px solid var(--card-border);
}

/* ── Definition list ─────────────────────────────────────────────────────── */

.dcr-rich-content dl        { margin-bottom: var(--sp-4); }
.dcr-rich-content dt        { font-weight: var(--fw-semibold); color: var(--text-dark); margin-top: var(--sp-3); }
.dcr-rich-content dd        { padding-left: var(--sp-5); color: var(--text-mid); margin-top: var(--sp-1); }

/* ── Images ──────────────────────────────────────────────────────────────── */

.dcr-rich-content img {
  max-width:     100%;
  height:        auto;
  border-radius: var(--radius-md);
  margin:        var(--sp-4) 0;
  display:       block;
}

/* ── Figure / caption ────────────────────────────────────────────────────── */

.dcr-rich-content figure       { margin: var(--sp-6) 0; }
.dcr-rich-content figcaption   {
  font-size: var(--text-md);
  color:     var(--text-muted);
  margin-top: var(--sp-2);
  text-align: center;
}

/* ── Spacing between block siblings ─────────────────────────────────────── */

.dcr-rich-content > * + * { margin-top: var(--sp-3); }
.dcr-rich-content > *:first-child { margin-top: 0; }