/* ===========================================================
   BIBLE STUDY UI
   ===========================================================
   Three layers:
   1. Testament/division overview (book grid)
   2. Chapter selector (chapter buttons)
   3. Chapter detail (verses + annotations + doctrines)
   =========================================================== */

/* ---- Testament tabs ---- */
.testament-tabs{
  display:flex;
  gap: 1rem;
  justify-content: center;
  margin: 2rem 0;
  flex-wrap: wrap;
}
.testament-tab{
  background: transparent;
  border: 1px solid rgba(244,235,217,.2);
  color: var(--parchment-dim);
  padding: .8rem 1.6rem;
  border-radius: 2px;
  font-family:'Inter', sans-serif;
  font-size: .78rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all .3s;
}
.testament-tab:hover{
  border-color: var(--gold);
  color: var(--gold-bright);
}
.testament-tab.active{
  background: var(--gold);
  color: var(--bg-deep);
  border-color: var(--gold);
}

/* ---- Division header ---- */
.division-header{
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.8rem;
  color: var(--gold-bright);
  font-style: italic;
  margin: 2.5rem 0 1rem;
  padding-bottom: .5rem;
  border-bottom: 1px solid rgba(201,162,74,.3);
  text-align: left;
  max-width: 1100px;
  margin-inline: auto;
}

/* ---- Book grid ---- */
.book-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1rem;
  max-width: 1100px;
  margin: 1rem auto 2rem;
}

.book-card{
  background: linear-gradient(180deg, rgba(244,235,217,.05), rgba(244,235,217,.01));
  border: 1px solid rgba(201,162,74,.2);
  padding: 1.4rem 1.2rem;
  border-radius: 3px;
  cursor: pointer;
  text-align: left;
  transition: all .35s;
  position: relative;
  overflow: hidden;
}
.book-card::before{
  content: attr(data-chapters)" ch";
  position: absolute;
  top: 1rem;
  right: 1rem;
  font-family: 'Inter', sans-serif;
  font-size: .65rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold);
  opacity: .6;
}
.book-card:hover{
  border-color: var(--gold-bright);
  background: linear-gradient(180deg, rgba(201,162,74,.15), rgba(201,162,74,.05));
  transform: translateY(-3px);
  box-shadow: 0 10px 28px -12px rgba(201,162,74,.5);
}
.book-card h4{
  font-size: 1.4rem;
  color: var(--gold-bright);
  font-style: italic;
  margin-bottom: .3rem;
}
.book-card .theme{
  font-family:'Cormorant Garamond', serif;
  font-size: .95rem;
  color: var(--parchment-dim);
  line-height: 1.4;
  font-style: italic;
}

/* ---- Chapter selector grid ---- */
.chapter-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
  gap: .6rem;
  max-width: 800px;
  margin: 2rem auto;
}
.chapter-cell{
  background: rgba(244,235,217,.04);
  border: 1px solid rgba(201,162,74,.25);
  padding: .9rem 0;
  text-align: center;
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.2rem;
  color: var(--parchment);
  font-style: italic;
  cursor: pointer;
  border-radius: 2px;
  transition: all .25s;
  position: relative;
}
.chapter-cell:hover{
  background: rgba(201,162,74,.2);
  border-color: var(--gold);
  color: var(--gold-bright);
}
.chapter-cell.has-content::after{
  content: "";
  position: absolute;
  bottom: 6px; left: 50%;
  transform: translateX(-50%);
  width: 4px; height: 4px;
  background: var(--gold-bright);
  border-radius: 50%;
}

.chapter-legend{
  font-family: 'Inter', sans-serif;
  font-size: .72rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--parchment-dim);
  text-align: center;
  margin-top: 1rem;
  opacity: .7;
}

/* ===========================================================
   CHAPTER DETAIL — annotated study view
   =========================================================== */
.chapter-detail{
  max-width: 1000px;
  margin: 2rem auto;
  text-align: left;
  padding: 0 1rem;
}

.chapter-header{
  border-bottom: 1px solid rgba(201,162,74,.3);
  padding-bottom: 1.4rem;
  margin-bottom: 2rem;
}
.chapter-header .crumbs{
  font-family: 'Inter', sans-serif;
  font-size: .72rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: .8rem;
}
.chapter-header h2{
  font-size: clamp(2.2rem, 4vw, 3.4rem);
  color: var(--parchment);
  font-style: italic;
  margin-bottom: .6rem;
}
.chapter-header .chapter-summary{
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.15rem;
  color: var(--parchment-dim);
  font-style: italic;
  line-height: 1.6;
  max-width: 760px;
}

/* ---- Key verse highlight ---- */
.key-verse-box{
  background: linear-gradient(180deg, rgba(201,162,74,.15), rgba(201,162,74,.05));
  border-left: 4px solid var(--gold);
  padding: 1.6rem 2rem;
  margin: 2rem 0;
  border-radius: 0 3px 3px 0;
}
.key-verse-box .label{
  font-family: 'Inter', sans-serif;
  font-size: .68rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--gold-bright);
  margin-bottom: .8rem;
}
.key-verse-box .text{
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.4rem;
  font-style: italic;
  color: var(--parchment);
  line-height: 1.5;
}
.key-verse-box cite{
  display: block;
  margin-top: .8rem;
  font-family: 'Inter', sans-serif;
  font-size: .75rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--gold);
  font-style: normal;
}

/* ---- Outline ---- */
.outline-block{
  background: rgba(244,235,217,.04);
  border: 1px solid rgba(201,162,74,.2);
  padding: 1.6rem 2rem;
  border-radius: 3px;
  margin: 2rem 0;
}
.outline-block h3{
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.4rem;
  color: var(--gold-bright);
  font-style: italic;
  margin-bottom: 1rem;
}
.outline-row{
  display: flex;
  gap: 1rem;
  padding: .5rem 0;
  border-bottom: 1px dashed rgba(201,162,74,.15);
}
.outline-row:last-child{ border-bottom: none; }
.outline-row .verses{
  font-family: 'Inter', sans-serif;
  font-size: .8rem;
  color: var(--gold);
  letter-spacing: .1em;
  min-width: 70px;
  padding-top: .15rem;
}
.outline-row .desc{
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.05rem;
  color: var(--parchment-dim);
  font-style: italic;
}

/* ---- Annotated verses ---- */
.verses-section{
  margin: 3rem 0;
}
.verses-section > h3{
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.8rem;
  color: var(--gold-bright);
  font-style: italic;
  margin-bottom: 1.4rem;
  border-bottom: 1px solid rgba(201,162,74,.3);
  padding-bottom: .4rem;
}

.verse-block{
  margin: 2.4rem 0;
  padding: 1.6rem;
  background: rgba(244,235,217,.03);
  border-radius: 3px;
  border-left: 3px solid rgba(201,162,74,.5);
}
.verse-block .verse-text{
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.3rem;
  color: var(--parchment);
  line-height: 1.65;
  margin-bottom: 1.2rem;
}
.verse-block .verse-num{
  display: inline-block;
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.6rem;
  color: var(--gold-bright);
  font-style: italic;
  font-weight: 600;
  margin-right: .5rem;
  vertical-align: baseline;
}

.notes-block{
  margin: 1rem 0;
  padding-left: 1.2rem;
  border-left: 2px solid rgba(201,162,74,.25);
}
.notes-block .notes-label{
  font-family: 'Inter', sans-serif;
  font-size: .65rem;
  letter-spacing: .35em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: .6rem;
}
.notes-block .note{
  font-family: 'Fraunces', serif;
  font-size: 1rem;
  color: var(--parchment-dim);
  line-height: 1.7;
  margin-bottom: .8rem;
  font-weight: 300;
}
.notes-block .note::before{
  content: "→ ";
  color: var(--gold);
  font-weight: 600;
}

.cross-refs-block{
  margin-top: 1rem;
  padding-top: .8rem;
  border-top: 1px dashed rgba(201,162,74,.2);
}
.cross-refs-block .label{
  font-family: 'Inter', sans-serif;
  font-size: .65rem;
  letter-spacing: .35em;
  text-transform: uppercase;
  color: var(--crimson);
  margin-bottom: .6rem;
}
.ref-pill{
  display: inline-block;
  font-family: 'Inter', sans-serif;
  font-size: .72rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--gold-bright);
  padding: .3rem .7rem;
  border: 1px solid rgba(201,162,74,.4);
  border-radius: 2px;
  margin: .3rem .3rem 0 0;
  background: rgba(201,162,74,.06);
  cursor: pointer;
  transition: all .2s;
}
.ref-pill:hover{
  background: rgba(201,162,74,.2);
  color: var(--parchment);
}

/* ---- Doctrines panel ---- */
.doctrines-block{
  background: linear-gradient(180deg, rgba(139,30,30,.12), rgba(139,30,30,.04));
  border: 1px solid rgba(176,72,72,.3);
  padding: 1.8rem 2rem;
  border-radius: 3px;
  margin: 3rem 0;
}
.doctrines-block h3{
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.6rem;
  color: var(--crimson-soft);
  font-style: italic;
  margin-bottom: 1.2rem;
}
.doctrine-row{
  margin: 1rem 0;
  padding-bottom: 1rem;
  border-bottom: 1px dashed rgba(176,72,72,.2);
}
.doctrine-row:last-child{ border-bottom: none; padding-bottom: 0; }
.doctrine-row .name{
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.2rem;
  color: var(--parchment);
  font-style: italic;
  margin-bottom: .4rem;
}

/* ---- Christ connection ---- */
.christ-connection{
  background: linear-gradient(135deg, rgba(255,244,194,.08), rgba(201,162,74,.04));
  border: 1px solid rgba(201,162,74,.3);
  padding: 1.8rem 2rem;
  border-radius: 3px;
  margin: 3rem 0;
  position: relative;
  overflow: hidden;
}
.christ-connection::before{
  content: "✠";
  position: absolute;
  top: 1rem; right: 1.5rem;
  font-size: 3rem;
  color: rgba(201,162,74,.2);
  font-family: 'Cormorant Garamond', serif;
}
.christ-connection h3{
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.6rem;
  color: var(--gold-bright);
  font-style: italic;
  margin-bottom: 1rem;
}
.christ-connection p{
  font-family: 'Fraunces', serif;
  font-size: 1.05rem;
  color: var(--parchment-dim);
  line-height: 1.7;
  font-weight: 300;
}

/* ---- Application ---- */
.application-block{
  background: rgba(244,235,217,.06);
  border-left: 3px solid var(--gold-bright);
  padding: 1.6rem 2rem;
  margin: 2rem 0;
  border-radius: 0 3px 3px 0;
}
.application-block h3{
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.5rem;
  color: var(--parchment);
  font-style: italic;
  margin-bottom: .8rem;
}
.application-block p{
  font-family: 'Fraunces', serif;
  font-size: 1.05rem;
  color: var(--parchment-dim);
  line-height: 1.7;
}

/* ---- Coming-soon placeholder for unbuild chapters ---- */
.chapter-stub{
  background: rgba(244,235,217,.04);
  border: 1px dashed rgba(201,162,74,.3);
  padding: 3rem 2rem;
  border-radius: 3px;
  text-align: center;
  margin: 3rem auto;
  max-width: 760px;
}
.chapter-stub h3{
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.8rem;
  color: var(--gold-bright);
  font-style: italic;
  margin-bottom: 1rem;
}
.chapter-stub p{
  color: var(--parchment-dim);
  line-height: 1.7;
  margin-bottom: 1rem;
}
.chapter-stub .tools{
  margin-top: 1.6rem;
  padding-top: 1.2rem;
  border-top: 1px solid rgba(201,162,74,.2);
}
.chapter-stub .tools .label{
  font-family: 'Inter', sans-serif;
  font-size: .7rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: .8rem;
}
.chapter-stub .tools p{
  font-size: .95rem;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
}

/* ---- Chapter navigation (prev/next) ---- */
.chapter-nav{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 3rem 0;
  padding-top: 2rem;
  border-top: 1px solid rgba(201,162,74,.2);
}
.chapter-nav .nav-btn{
  background: transparent;
  border: 1px solid rgba(201,162,74,.3);
  color: var(--parchment);
  padding: .8rem 1.4rem;
  border-radius: 2px;
  cursor: pointer;
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.1rem;
  font-style: italic;
  transition: all .3s;
}
.chapter-nav .nav-btn:hover{
  background: rgba(201,162,74,.15);
  border-color: var(--gold);
  color: var(--gold-bright);
}
.chapter-nav .nav-btn:disabled{
  opacity: .3;
  cursor: not-allowed;
}

/* ===========================================================
   LIVE-LOADED CONTENT (KJV + Matthew Henry)
   =========================================================== */
.bible-loading{
  text-align: center;
  padding: 4rem 2rem;
}
.loading-spinner{
  width: 50px;
  height: 50px;
  border: 3px solid rgba(201,162,74,.2);
  border-top-color: var(--gold-bright);
  border-radius: 50%;
  margin: 0 auto;
  animation: spin 1s linear infinite;
}
@keyframes spin{ to{ transform: rotate(360deg); } }

.content-section-h{
  font-family: 'Cormorant Garamond', serif;
  font-size: 2rem;
  font-style: italic;
  color: var(--gold-bright);
  margin: 2.5rem 0 1rem;
  border-bottom: 1px solid rgba(201,162,74,.3);
  padding-bottom: .6rem;
}

/* KJV section */
.kjv-section{
  margin: 2rem 0 3rem;
}
.kjv-verses{
  background: rgba(244,235,217,.04);
  padding: 1.6rem 2rem;
  border-radius: 3px;
  border-left: 3px solid var(--gold);
}
.kjv-section-heading{
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.4rem;
  font-style: italic;
  color: var(--parchment);
  margin: 1.4rem 0 .8rem;
  padding-top: 1rem;
  border-top: 1px dashed rgba(201,162,74,.2);
}
.kjv-section-heading:first-child{
  border-top: none;
  padding-top: 0;
  margin-top: 0;
}
.kjv-verse{
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.2rem;
  line-height: 1.75;
  color: var(--parchment);
  margin: .4rem 0;
  scroll-margin-top: 100px;
}
.kjv-verse-num{
  color: var(--gold-bright);
  font-weight: 600;
  font-style: italic;
  margin-right: .5rem;
  font-size: .95rem;
  vertical-align: baseline;
}
.kjv-verse-text{
  /* inline */
}

/* Matthew Henry section */
.mh-section{
  margin: 3rem 0;
}
.mh-credit{
  font-family: 'Inter', sans-serif;
  font-size: .7rem;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--gold);
  opacity: .7;
  margin-bottom: 1.5rem;
}
.mh-introduction{
  background: linear-gradient(180deg, rgba(201,162,74,.1), rgba(201,162,74,.02));
  border-left: 3px solid var(--gold);
  padding: 1.4rem 1.8rem;
  margin-bottom: 2rem;
  border-radius: 0 3px 3px 0;
}
.mh-label{
  font-family: 'Inter', sans-serif;
  font-size: .68rem;
  letter-spacing: .35em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: .6rem;
}
.mh-introduction p{
  font-family: 'Fraunces', serif;
  font-size: 1.05rem;
  color: var(--parchment-dim);
  line-height: 1.75;
  font-style: italic;
}
.mh-verse-section{
  margin: 1.6rem 0;
  background: rgba(244,235,217,.03);
  border-radius: 3px;
  border: 1px solid rgba(201,162,74,.15);
}
.mh-verse-header{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: .8rem 1.4rem;
  background: rgba(201,162,74,.1);
  border-bottom: 1px solid rgba(201,162,74,.2);
  border-radius: 3px 3px 0 0;
}
.mh-verse-range{
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 1.2rem;
  color: var(--gold-bright);
}
.mh-toggle{
  background: transparent;
  border: 1px solid rgba(201,162,74,.3);
  color: var(--parchment-dim);
  font-family: 'Inter', sans-serif;
  font-size: .7rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  padding: .3rem .7rem;
  border-radius: 2px;
  cursor: pointer;
  transition: all .2s;
}
.mh-toggle:hover{
  background: var(--gold);
  color: var(--bg-deep);
}
.mh-paragraphs{
  padding: 1.4rem 1.8rem;
}
.mh-paragraphs p{
  font-family: 'Fraunces', serif;
  font-size: 1rem;
  color: var(--parchment-dim);
  line-height: 1.8;
  margin-bottom: 1rem;
  font-weight: 300;
}
.mh-heading{
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.2rem;
  font-style: italic;
  color: var(--gold-bright);
  margin: 1.6rem 0 .8rem;
}

/* ===========================================================
   ANNOTATION RENDERING — in-depth full chapter view
   =========================================================== */

.annotation {
  font-family: 'Cormorant Garamond', serif;
  color: var(--ink);
  max-width: 880px;
  margin: 0 auto;
}

.annot-section {
  margin: 2.4rem 0;
  padding: 1.6rem 1.8rem;
  background: rgba(244, 235, 217, 0.4);
  border-left: 3px solid var(--gold);
  border-radius: 0 4px 4px 0;
}

.annot-label {
  font-family: 'Inter', sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold-bright, #e9c870);
  margin-bottom: 0.8rem;
  font-weight: 700;
  opacity: 0.95;
}

.annot-section p {
  font-size: 1.1rem;
  line-height: 1.7;
}

.key-verse-section {
  background: linear-gradient(180deg, rgba(255, 248, 216, 0.6), rgba(244, 235, 217, 0.4));
  border-left-color: var(--crimson);
  text-align: center;
}

.key-verse {
  font-size: 1.4rem !important;
  font-style: italic;
  color: var(--ink);
  margin: 0.8rem 0 0.4rem;
  line-height: 1.5;
}

.key-verse-ref {
  font-family: 'Inter', sans-serif;
  font-size: 0.85rem;
  font-style: normal;
  color: var(--crimson);
  letter-spacing: 0.05em;
}

.outline-section .outline-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.outline-list li {
  padding: 0.6rem 0;
  border-bottom: 1px dashed rgba(201, 162, 74, 0.3);
  font-size: 1.05rem;
  line-height: 1.6;
}

.outline-list li:last-child { border-bottom: none; }

.outline-vv {
  display: inline-block;
  min-width: 4rem;
  font-family: 'Inter', sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--crimson);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.verses-section .verse-block {
  background: rgba(255, 252, 242, 0.6);
  margin: 1.4rem 0;
  padding: 1.2rem 1.4rem;
  border-radius: 3px;
  border-left: 2px solid var(--gold);
}

.verse-header {
  margin-bottom: 1rem;
  padding-bottom: 0.8rem;
  border-bottom: 1px solid rgba(201, 162, 74, 0.25);
}

.verse-block .verse-num {
  display: inline-block;
  font-family: 'Inter', sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--crimson);
  background: rgba(139, 30, 30, 0.08);
  padding: 0.15rem 0.5rem;
  border-radius: 2px;
  margin-right: 0.6rem;
  vertical-align: top;
}

.verse-block .verse-text {
  font-size: 1.15rem;
  line-height: 1.65;
  color: var(--ink);
  font-style: italic;
}

.verse-commentary {
  font-size: 1rem;
  line-height: 1.7;
}

.verse-note {
  margin: 0.6rem 0;
  color: var(--ink);
  font-size: 1.02rem;
  line-height: 1.7;
}

.verse-note::before {
  content: "▸ ";
  color: var(--gold-deep, #8a6b1c);
  font-weight: 700;
  margin-right: 0.2rem;
}

.cross-refs {
  margin-top: 0.8rem;
  padding-top: 0.6rem;
  border-top: 1px dashed rgba(201, 162, 74, 0.3);
  font-family: 'Inter', sans-serif;
  font-size: 0.82rem;
  line-height: 1.6;
}

.cross-refs .cr-label {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-deep, #8a6b1c);
  margin-right: 0.5rem;
}

.cr-ref {
  display: inline-block;
  color: var(--crimson);
  margin: 0.1rem 0.15rem;
  padding: 0.1rem 0.3rem;
  background: rgba(139, 30, 30, 0.05);
  border-radius: 2px;
  white-space: nowrap;
}

/* Clickable cross-reference: underlined, gold accent, hover lift */
a.cr-link {
  text-decoration: none;
  color: var(--crimson);
  border-bottom: 1px solid rgba(201, 162, 74, 0.55);
  background: rgba(201, 162, 74, 0.10);
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
a.cr-link:hover {
  background: rgba(201, 162, 74, 0.28);
  color: #6e1414;
  border-bottom-color: var(--gold, #c9a24a);
}
a.cr-link::after {
  content: ' \2197';            /* small up-right arrow to signal "go there" */
  font-size: 0.7em;
  color: var(--gold-deep, #8a6b1c);
  opacity: 0.7;
}

.doctrines-section .doctrine-block {
  background: rgba(255, 252, 242, 0.6);
  padding: 1rem 1.2rem;
  margin: 0.8rem 0;
  border-radius: 3px;
  border-left: 2px solid var(--crimson);
}

.doctrine-name {
  font-family: 'Fraunces', 'Cormorant Garamond', serif;
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 0.4rem;
}

.doctrine-refs {
  font-family: 'Inter', sans-serif;
  font-size: 0.8rem;
  line-height: 1.6;
}

.application-section {
  background: linear-gradient(180deg, rgba(255, 248, 216, 0.6), rgba(244, 235, 217, 0.5));
  border-left-color: var(--gold-deep, #8a6b1c);
}

.christ-section {
  background: linear-gradient(180deg, rgba(255, 240, 240, 0.5), rgba(244, 220, 220, 0.4));
  border-left-color: var(--crimson);
}

/* Chapter cell — annotated dot indicator */
.chapter-cell.annotated {
  border-color: var(--gold);
  background: rgba(201, 162, 74, 0.12);
  position: relative;
}

.chapter-cell .chapter-dot {
  position: absolute;
  top: 2px;
  right: 5px;
  color: var(--gold-deep, #8a6b1c);
  font-size: 1rem;
  line-height: 1;
}

/* Placeholder for unwritten chapters */
.chapter-stub .stub-icon {
  font-size: 2.2rem;
  color: var(--gold);
  text-align: center;
  margin-bottom: 1rem;
}

.chapter-stub .stub-meta {
  font-family: 'Inter', sans-serif;
  font-size: 0.8rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-deep, #8a6b1c);
  text-align: center;
  margin: 1.4rem 0 1rem;
}

.chapter-stub .stub-quote {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.05rem;
  color: var(--ink);
  text-align: center;
  margin: 1.4rem auto 0;
  max-width: 540px;
  padding-top: 1rem;
  border-top: 1px solid rgba(201, 162, 74, 0.3);
}

@media (max-width: 640px) {
  .annot-section { padding: 1.2rem 1.1rem; }
  .verse-block { padding: 1rem 1rem; }
  .annot-section p { font-size: 1.02rem; }
  .key-verse { font-size: 1.2rem !important; }
  .outline-vv { display: block; min-width: 0; margin-bottom: 0.2rem; }
}

/* ===========================================================
   VISUAL ENRICHMENT — Bible study pages (v2)
   ===========================================================
   Each annotation section gets a distinct identity: an icon,
   an accent color, and subtle depth. Turns a flat column of
   identical cards into a richer, more readable reading
   experience that still feels cohesive and reverent.
   =========================================================== */

/* Section cards: more depth, soft shadow, warmer parchment */
.annotation .annot-section{
  position: relative;
  margin: 1.8rem 0;
  padding: 1.7rem 1.9rem 1.7rem 2rem;
  background:
    linear-gradient(180deg, rgba(248,240,224,.66), rgba(244,235,217,.5));
  border: 1px solid rgba(201,162,74,.22);
  border-left: 3px solid var(--gold);
  border-radius: 6px;
  box-shadow: 0 10px 30px -18px rgba(0,0,0,.5);
}

/* A small icon chip floating on the left border of each section */
.annotation .annot-section::before{
  position: absolute;
  left: -16px;
  top: 1.5rem;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 15px;
  background: var(--gold);
  color: #1a1208;
  box-shadow: 0 4px 12px -3px rgba(0,0,0,.5);
}
.annotation .summary-section::before{ content:'\1F4DC'; }      /* scroll */
.annotation .key-verse-section::before{ content:'\2726'; background: var(--crimson); color:#fff4c2; } /* star */
.annotation .outline-section::before{ content:'\2630'; }       /* trigram / list */
.annotation .verses-section::before{ content:'\270D'; }        /* writing hand */
.annotation .doctrines-section::before{ content:'\271D'; background:#6a5018; color:#fff4c2; } /* latin cross */
.annotation .application-section::before{ content:'\27A4'; background:#5a7a3a; color:#f4ebd9; } /* arrow */
.annotation .christ-section::before{ content:'\2627'; background: var(--crimson); color:#fff4c2; } /* chi-rho */

/* KEY VERSE — the centerpiece of every page */
.annotation .key-verse-section{
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(255,244,194,.5), rgba(244,235,217,.4)),
    linear-gradient(180deg, rgba(255,248,216,.6), rgba(244,235,217,.4));
  border: 1px solid rgba(139,30,30,.25);
  border-left: 3px solid var(--crimson);
  text-align: center;
  padding: 2.2rem 2rem;
}
.annotation .key-verse-section .annot-label{ color: var(--crimson); }
.annotation .key-verse{
  position: relative;
  font-size: 1.5rem !important;
  line-height: 1.55;
  padding: 0 1.4rem;
}
.annotation .key-verse-section::after{
  content: '\201D';
  position: absolute;
  right: 1.2rem;
  bottom: -0.2rem;
  font-family: 'Fraunces', serif;
  font-size: 5rem;
  color: rgba(139,30,30,.12);
  line-height: 1;
  pointer-events: none;
}

/* CHRIST IN THIS CHAPTER — the gospel heart, set apart */
.annotation .christ-section{
  background:
    radial-gradient(140% 120% at 50% 0%, rgba(255,228,200,.5), rgba(244,235,217,.42)),
    linear-gradient(180deg, rgba(250,238,224,.6), rgba(244,235,217,.45));
  border: 1px solid rgba(139,30,30,.3);
  border-left: 3px solid var(--crimson);
  box-shadow: 0 14px 40px -20px rgba(139,30,30,.45);
}
.annotation .christ-section .annot-label{ color: var(--crimson); }
.annotation .christ-section p{ font-size: 1.14rem; }

/* APPLICATION — warm, action-toned */
.annotation .application-section{
  border-left-color: #5a7a3a;
}
.annotation .application-section .annot-label{ color:#4a6a2a; }

/* Verse-by-verse: nicer verse numbers, gentle separators */
.annotation .verse-block{
  position: relative;
  padding: 1.1rem 0 1.2rem;
  border-bottom: 1px dashed rgba(201,162,74,.28);
}
.annotation .verse-block:last-child{ border-bottom: none; }
.annotation .verse-block .verse-num{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.7rem;
  height: 1.7rem;
  padding: 0 .35rem;
  background: var(--crimson);
  color: #fff4c2;
  font-family: 'Inter', sans-serif;
  font-size: .8rem;
  font-weight: 600;
  border-radius: 50%;
  margin-right: .6rem;
  vertical-align: middle;
}
.annotation .verse-block .verse-text{
  font-style: italic;
  color: var(--ink);
}
.annotation .verse-note{
  position: relative;
  margin: .7rem 0 .7rem 1.1rem;
  padding-left: 1rem;
  border-left: 2px solid rgba(201,162,74,.35);
  line-height: 1.65;
}

/* Outline: numbered, with verse chips */
.annotation .outline-list{ counter-reset: ol; list-style: none; padding-left: 0; }
.annotation .outline-list li{
  position: relative;
  padding: .5rem 0 .5rem 2.4rem;
  border-bottom: 1px dotted rgba(201,162,74,.25);
}
.annotation .outline-list li:last-child{ border-bottom: none; }
.annotation .outline-list li::before{
  counter-increment: ol;
  content: counter(ol);
  position: absolute;
  left: 0;
  top: .5rem;
  width: 1.6rem;
  height: 1.6rem;
  display: flex; align-items: center; justify-content: center;
  background: rgba(201,162,74,.2);
  border: 1px solid rgba(201,162,74,.4);
  color: var(--gold-deep, #8a6b1c);
  font-family: 'Inter', sans-serif;
  font-size: .72rem;
  font-weight: 600;
  border-radius: 50%;
}
.annotation .outline-vv{
  font-family: 'Inter', sans-serif;
  font-size: .7rem;
  letter-spacing: .08em;
  color: var(--crimson);
  margin-right: .5rem;
}

/* Doctrine blocks: card grid feel */
.annotation .doctrine-block{
  margin: .8rem 0;
  padding: .9rem 1.1rem;
  background: rgba(255,248,224,.5);
  border: 1px solid rgba(201,162,74,.25);
  border-radius: 5px;
}
.annotation .doctrine-name{
  font-weight: 600;
  color: #6a5018;
  margin-bottom: .35rem;
}

@media (max-width: 640px){
  .annotation .annot-section{ padding-left: 1.4rem; }
  .annotation .annot-section::before{ left: -14px; width: 26px; height: 26px; font-size: 13px; }
  .annotation .key-verse{ font-size: 1.25rem !important; padding: 0 .4rem; }
}