/*
 * Shared base styles for all books.
 * Long-form typography for MDX lives in src/styles/content-prose.css (`.reading-width.content-prose`).
 * This file: book chrome + legacy Scrivener shell (`div.div1`) and tables/lists/paragraphs inside it.
 * Per-book overrides (optional): /books/<bookSlug>/css/styles.css
 */

/*
 * Book look without touching header/footer: never set font-size on body — it inherits into
 * .site-header / .site-footer (e.g. buttons use font: inherit).
 */
body.book {
  background: #0507086e;
}

/* Book action buttons — sticky sibling above article.content-panel inside <main>.
   z-index here overrides global.css (this file loads after it).
   --header-height-current tracks the visual header height (compact when scrolled). */
.book-actions {
  position: sticky;
  top: calc(var(--header-height-current) + 10px);
  z-index: 200;
}

main article.content-panel {
  font-family: 'Source Sans 3', 'Segoe UI', sans-serif;
}

/* Legacy Scrivener HTML shell (imported body fragments). MDX books omit `div.div1`. */
main article.content-panel div.div1 {
  margin: 0 auto;
  padding: 0 1.6rem 0 1.6rem;
  width: 850px;
  height: 100%;
  border-radius: 7px;
}

main article.content-panel img.img1 {
  height: auto;
  width: 100%;
}

main article.content-panel span.s1 {
  font-size: 1rem;
}

main article.content-panel span.Scrivener-converted-space {
  white-space: pre;
}

main article.content-panel div.div1 > h2.book-chapter-title:first-child {
  margin-top: 3rem;
}

/* Creed / comparison tables inside legacy HTML — MDX tables use `.content-prose table`. */
main article.content-panel div.div1 table {
  width: 100%;
  margin: 2rem 0;
  font-size: 0.92rem;
  line-height: 1.55;
  color: #dde8ea;
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(127, 202, 208, 0.22);
  box-shadow:
    0 4px 28px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  background: rgba(5, 12, 15, 0.72);
}

main article.content-panel div.div1 table .s1 {
  font-size: inherit;
}

main article.content-panel div.div1 th,
main article.content-panel div.div1 td {
  padding: 0.9rem 1.05rem;
  vertical-align: top;
  border-right: 1px solid rgba(127, 202, 208, 0.12);
}

main article.content-panel div.div1 th:last-child,
main article.content-panel div.div1 td:last-child {
  border-right: none;
}

main article.content-panel div.div1 th {
  vertical-align: middle;
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: 0.03em;
  line-height: 1.25;
  text-align: center;
  color: #f0fafb;
  background: linear-gradient(
    180deg,
    rgba(22, 55, 62, 0.98) 0%,
    rgba(10, 28, 34, 0.96) 100%
  );
  border-bottom: 2px solid rgba(200, 169, 107, 0.5);
  box-shadow: inset 0 1px 0 rgba(127, 202, 208, 0.14);
}

main article.content-panel div.div1 th .s1 {
  color: #b8e8ec;
}

main article.content-panel div.div1 td {
  text-align: left;
  border-bottom: 1px solid rgba(127, 202, 208, 0.1);
}

main article.content-panel div.div1 tr:not(:first-child):nth-child(odd) td {
  background: rgba(6, 16, 20, 0.65);
}

main article.content-panel div.div1 tr:not(:first-child):nth-child(even) td {
  background: rgba(127, 202, 208, 0.06);
}

main article.content-panel div.div1 tr:not(:first-child):hover td {
  background: rgba(127, 202, 208, 0.11);
}

main article.content-panel div.div1 tr:last-child td {
  border-bottom: none;
}

main article.content-panel div.div1 table p {
  margin-bottom: 0.45rem;
  line-height: 1.55;
  font-size: inherit;
}

main article.content-panel div.div1 table p:last-child {
  margin-bottom: 0;
}

main article.content-panel div.div1 th p {
  text-align: center;
  line-height: 1.25;
}

main article.content-panel div.div1 p {
  margin-bottom: 1.5rem;
}

main article.content-panel div.div1 li {
  margin-bottom: 1.5rem;
}