/* =========================================================
   BIBLE ILLUMINATED
   VERSE COMPARISON
   Single authoritative layout
   ========================================================= */

.verse-compare-view {
  width: 100%;
  margin: 0;
  padding: 0;
}

.verse-compare-heading {
  position: static;
  inset: auto;

  width: 100%;
  margin: 0 0 10px;
  padding: 8px 6px 10px;

  text-align: center;

  background: transparent;

  border-bottom:
    1px solid rgba(89, 66, 39, .32);
}

.verse-compare-reference {
  margin: 0;

  color: var(--ink);

  font-size: 1.05rem;
  line-height: 1.2;
  letter-spacing: .12em;
}

.verse-compare-subtitle {
  margin-top: 5px;

  color: var(--muted-ink);

  font-size: .61rem;
  line-height: 1.2;
  letter-spacing: .14em;
}

.compare-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr);

  gap: 7px;

  width: 100%;
  margin: 0;
  padding: 0;
}

.compare-panel {
  position: static;

  width: 100%;
  margin: 0;
  padding: 10px 12px 12px;

  overflow: visible;

  border:
    1px solid rgba(89, 66, 39, .46);

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.055),
      transparent
    );
}

.compare-panel h3 {
  margin: 0 0 7px;

  color: var(--ink);

  text-align: center;

  font-size: .62rem;
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: .15em;
}

.compare-verse-reference {
  display: none;
}

.compare-focus-text {
  display: block;

  margin: 0;
  padding: 0;

  color: var(--ink);

  font-family:
    var(--reading-face, Georgia, "Times New Roman", serif);

  font-size:
    .98rem;

  line-height: 1.36;

  text-align: left;

  overflow: visible;
}

.verse-nav {
  position: static;

  display: grid;
  grid-template-columns: 1fr 1fr;

  gap: 7px;

  width: 100%;
  margin: 8px 0 0;
  padding: 0;

  background: transparent;
}

.verse-nav button {
  min-width: 0;
  min-height: 42px;

  padding: 7px 5px;

  border:
    1px solid rgba(89, 66, 39, .48);

  border-radius: 2px;

  background: transparent;
  color: var(--ink);

  font-size: .62rem;
  line-height: 1.2;
  letter-spacing: .10em;
}

/* =========================================================
   COMPARISON PAGE MODE
   Remove decorative elements that waste study space
   ========================================================= */

body.compare-mode .folio-shell {
  padding-top: 8px;
}

body.compare-mode .folio {
  padding:
    16px
    20px
    26px;
}

body.compare-mode .title-page,
body.compare-mode .ornament-top,
body.compare-mode .ornamental-rule,
body.compare-mode .chapter-heading {
  display: none !important;
}

body.compare-mode .scripture {
  display: block;

  width: 100%;
  max-width: none;

  margin: 0;
  padding: 0;

  text-align: left;
}

body.compare-mode .folio-footer {
  display: none !important;
}

/* =========================================================
   COMPACT COMPARISON
   ========================================================= */

body.compare-compact .verse-compare-heading {
  margin-bottom: 6px;
  padding:
    5px
    4px
    7px;
}

body.compare-compact .verse-compare-subtitle {
  font-size: .55rem;
}

body.compare-compact .compare-shell {
  gap: 5px;
}

body.compare-compact .compare-panel {
  padding:
    8px
    10px
    9px;
}

body.compare-compact .compare-panel h3 {
  margin-bottom: 5px;

  font-size: .55rem;
}

body.compare-compact .compare-focus-text {
  font-size:
    .90rem;

  line-height: 1.28;
}

body.compare-compact .verse-nav {
  margin-top: 6px;
}

body.compare-compact .verse-nav button {
  min-height: 38px;
}

/* =========================================================
   TABLET / LANDSCAPE / DESKTOP
   True facing-page comparison
   ========================================================= */

@media (min-width: 720px) {
  body.compare-mode .folio {
    padding:
      22px
      28px
      30px;
  }

  .compare-shell {
    grid-template-columns:
      minmax(0, 1fr)
      minmax(0, 1fr);

    gap: 10px;
  }

  .compare-panel {
    padding:
      15px
      16px
      18px;
  }

  .compare-focus-text {
    font-size:
      1rem;

    line-height: 1.4;
  }

  .verse-compare-heading {
    margin-bottom: 12px;
  }
}

@media (min-width: 1100px) {
  .verse-compare-view {
    max-width: 980px;
    margin: 0 auto;
  }
}

body.compare-mode .folio > .scripture {
  margin-top: 0 !important;
}

body.compare-mode .verse-compare-view,
body.compare-mode .verse-compare-heading,
body.compare-mode .compare-shell,
body.compare-mode .compare-panel {
  transform: none !important;
  top: auto !important;
  bottom: auto !important;
}