/* Keep the normal shortcode label and its plain-text Scripture reference together. */
.caic-commentary-shortcode {
  display: inline-block;
  white-space: nowrap;
}
.caic-commentary-reference {
  white-space: nowrap;
}

.caic-commentary-overlay[hidden] { display: none !important; }
.caic-commentary-overlay {
  position: fixed;
  inset: 0;
  /* Keep the commentary reading surface below Clark's study popups.
     Existing layers inspected on staging builds:
       LXX starts at 100000 and rises dynamically,
       Scripture Tooltips start at 10000050,
       Strong's Reference is much higher.
     90000 remains above normal site chrome while leaving the popup workspace free above it. */
  z-index: 90000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(0,0,0,.56);
}

.caic-commentary-modal {
  width: min(var(--caic-commentary-width, 900px), calc(100vw - 40px));
  max-height: min(var(--caic-commentary-height, 82vh), calc(100vh - 40px));
  display: flex;
  flex-direction: column;
  background: #fff;
  color: #111;
  border: var(--caic-commentary-border-width, 1px) solid var(--caic-commentary-border-color, #d1d5db);
  border-radius: 10px;
  box-sizing: border-box;
  box-shadow: 0 18px 60px rgba(0,0,0,.35);
  overflow: hidden;
}
.caic-commentary-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--caic-commentary-header-bg, #fff);
  color: var(--caic-commentary-header-text, #111);
  border-bottom: 1px solid rgba(0,0,0,.14);
}
.caic-commentary-title {
  flex: 1;
  font-weight: 700;
  font-size: 1.05rem;
  color: inherit !important;
  cursor: default;
}
.caic-commentary-header a,
.caic-commentary-title a {
  color: inherit;
}
.caic-commentary-close {
  appearance: none;
  border: 0;
  background: transparent;
  color: inherit;
  font-size: 30px;
  line-height: 1;
  cursor: pointer;
  padding: 0 2px;
}
.caic-commentary-body {
  overflow: auto;
  padding: 18px 22px 24px;
  overscroll-behavior: contain;
}
.caic-commentary-body:focus { outline: none; }
.caic-commentary-body h3:first-child { margin-top: 0; }
.caic-commentary-body img { max-width: 100%; height: auto; }
.caic-commentary-footer {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 8px 16px;
  background: var(--caic-commentary-footer-bg, #fff);
  color: var(--caic-commentary-footer-text, #111);
  border-top: 1px solid rgba(0,0,0,.12);
  font-size: .92rem;
  box-sizing: border-box;
}


.caic-commentary-brand {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 600;
  line-height: 1.1;
  white-space: nowrap;
}
.caic-commentary-brand-logo {
  display: block;
  width: 28px;
  height: 28px;
  object-fit: contain;
}
.caic-commentary-full-link {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: inherit;
}
.caic-commentary-loading,
.caic-commentary-error,
.caic-commentary-missing-verse { margin: 0; }
.caic-commentary-missing-verse {
  padding: 10px 12px;
  margin-bottom: 12px;
  background: rgba(0,0,0,.05);
  border-radius: 6px;
}
html.caic-commentary-open,
body.caic-commentary-open { overflow: hidden; }

@media (max-width: 640px) {
  .caic-commentary-overlay { padding: 8px; }
  .caic-commentary-modal {
    width: calc(100vw - 16px);
    max-height: calc(100vh - 16px);
    border-radius: 8px;
  }
  .caic-commentary-body { padding: 14px 14px 20px; }
  .caic-commentary-footer {
    min-height: 58px;
    padding: 7px 10px 24px;
  }
  
  .caic-commentary-brand {
    font-size: .88rem;
    gap: 6px;
  }
  .caic-commentary-brand-logo {
    width: 24px;
    height: 24px;
  }
.caic-commentary-full-link {
    right: 10px;
    bottom: 4px;
    top: auto;
    transform: none;
    font-size: .78rem;
  }
}