/* verse-peek.css — the tap-to-read verse peek on the generated pages.
   Same visual language as the calendar's subscribe dialog and day sheet:
   --kw-surface card, --kw-r-xl corner, hairline border, warm shadow, sans
   uppercase tracked eyebrow. The verse itself is set upright in the verse
   face, as the .com reader sets it — a peek is reading, not a pull quote.
   Voices come from /assets/design/divine.css; nothing here declares an ink. */
.vp {
  box-sizing: border-box;
  width: min(34rem, calc(100vw - 32px));
  max-height: min(80vh, 80dvh);
  margin: auto;
  padding: 1.6rem 1.5rem 1.35rem;
  border: 1px solid var(--kw-separator);
  border-radius: var(--kw-r-xl, 20px);
  background: var(--kw-surface);
  color: var(--kw-label);
  box-shadow: 0 24px 64px rgba(60, 40, 10, 0.28);
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  overflow: hidden;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.2s var(--kw-ease, ease), transform 0.2s var(--kw-ease, ease);
}
.vp:not([open]) { display: none; }
.vp.is-open { opacity: 1; transform: none; }
.vp::backdrop {
  background: rgba(0, 0, 0, 0.45);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
.vp__close {
  position: absolute; top: 14px; right: 14px; width: 32px; height: 32px;
  border-radius: 50%; border: none; background: var(--kw-fill); color: var(--kw-label);
  font-family: var(--kw-font-ui); font-size: 14px; line-height: 32px; padding: 0; cursor: pointer;
}
.vp__close:hover, .vp__close:focus-visible { background: var(--kw-separator); }
.vp__eyebrow {
  margin: 0; padding-right: 2.5rem;
  font-family: var(--kw-font-ui); font-size: 0.68rem; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--kw-accent);
}
.vp__text {
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  font-family: var(--kw-font-verse, Georgia, "Times New Roman", serif);
  font-style: normal;
  font-size: 1.15rem;
  line-height: 1.65;
  color: var(--kw-label);
}
.vp__text .verse + .verse { margin-left: 0.3em; }
/* Verse numbers as the .com reader sets them — small gold superscripts. */
.vp__text .verse__num {
  font-family: var(--kw-font-ui); font-size: 0.62em; font-weight: 600;
  color: var(--kw-accent); margin-right: 0.25em; vertical-align: super; line-height: 0;
}
.vp__foot {
  margin: 0; padding-top: 0.8rem; border-top: 1px solid var(--kw-separator);
  font-family: var(--kw-font-ui); font-size: 0.9rem;
}
.vp__read { color: var(--kw-accent); font-weight: 600; text-decoration: none; }
.vp__read:hover, .vp__read:focus-visible { text-decoration: underline; text-underline-offset: 3px; }

/* Narrow: a bottom sheet. */
@media (max-width: 639px) {
  .vp {
    width: 100%; max-width: none;
    margin: auto 0 0;
    max-height: min(85vh, 85dvh);
    border-radius: var(--kw-r-xl, 20px) var(--kw-r-xl, 20px) 0 0;
    border-bottom: none;
    padding-bottom: calc(1.35rem + env(safe-area-inset-bottom, 0px));
    transform: translateY(24px);
  }
}

[data-theme="dark"] .vp { box-shadow: 0 24px 64px rgba(0, 0, 0, 0.6); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .vp { box-shadow: 0 24px 64px rgba(0, 0, 0, 0.6); }
}
@media (prefers-reduced-motion: reduce) {
  .vp { transition: none; transform: none; opacity: 1; }
}