/* Scripture reference links and the Scripture pop-up (scripture-ref.js). */
a.sref { color: var(--accent); text-decoration: underline; text-decoration-style: dotted; text-decoration-thickness: 1px; text-underline-offset: .18em;
  text-decoration-color: color-mix(in srgb, var(--accent) 55%, transparent); cursor: pointer; border-radius: 3px; }
a.sref:hover { text-decoration-style: solid; text-decoration-color: currentColor; }
a.sref:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

.srp-backdrop { position: fixed; inset: 0; z-index: 70; background: rgba(30, 18, 10, .38); opacity: 0; transition: opacity .2s; }
.srp-backdrop.on { opacity: 1; }
.srp { position: fixed; z-index: 71; display: flex; flex-direction: column; background: var(--paper); color: var(--ink);
  border: 1px solid var(--gold); box-shadow: 0 24px 60px rgba(40, 20, 10, .32); opacity: 0; transition: opacity .2s, transform .25s var(--ease); }
.srp.on { opacity: 1; }
.srp.dragging { transition: none; user-select: none; }
.srp::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: linear-gradient(90deg, var(--gold), var(--accent)); border-radius: inherit; border-bottom-left-radius: 0; border-bottom-right-radius: 0; }

/* larger screens: a floating panel at the right, draggable by its header; the page stays visible */
.srp.float { right: 1.4rem; bottom: 1.4rem; width: min(30rem, calc(100vw - 2.8rem)); height: min(40rem, calc(100vh - 6rem)); border-radius: 18px; transform: translateY(14px); }
.srp.float.on { transform: none; }
.srp.float .srp-head { cursor: move; }
.srp.float .srp-grip { display: none; }
html.srp-open .srp-backdrop:not([hidden]) { display: block; }
@media (min-width: 700px) { .srp-backdrop { background: rgba(30, 18, 10, .12); } }

/* phones: a bottom sheet */
.srp.sheet { left: 0; right: 0; bottom: 0; max-height: 78vh; height: 78vh; border-radius: 20px 20px 0 0; border-bottom: 0; transform: translateY(100%);
  padding-bottom: env(safe-area-inset-bottom); }
.srp.sheet.on { transform: none; }
.srp-grip { display: flex; justify-content: center; padding: .55rem 0 .1rem; touch-action: none; }
.srp-grip span { width: 2.6rem; height: .3rem; border-radius: 999px; background: var(--rule); }

.srp-head { display: flex; align-items: flex-start; justify-content: space-between; gap: .6rem; padding: .7rem 1rem .6rem 1.2rem; border-bottom: 1px solid var(--rule); touch-action: none; }
.srp.float .srp-head { padding-top: 1rem; }
.srp-ttl { min-width: 0; }
.srp-eyebrow { margin: 0; font-family: var(--sans); font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.srp-head h2 { margin: .1rem 0 0; font-size: 1.45rem; line-height: 1.15; outline: none; }
.srp-tools { display: flex; align-items: center; gap: .35rem; flex: none; }
.srp-tr { font-family: var(--sans); font-size: .8rem; font-weight: 650; height: 2.4rem; max-width: 6rem; padding: 0 .5rem; border-radius: 999px;
  border: 1px solid var(--rule); background: var(--paper); color: var(--ink); cursor: pointer; }
.srp-tr:focus-visible, .srp .iconbtn:focus-visible, .srp-nav:focus-visible, .srp-body:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.srp .iconbtn svg, .srp-mini svg { width: 1.1rem; height: 1.1rem; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

.srp-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: .4rem 1.3rem 1rem; font-size: 1.06rem; line-height: 1.8; }
.srp-body[aria-busy="true"] { opacity: .55; }
.srp-ch { font-size: 1.2rem; margin: 1rem 0 .3rem; color: var(--accent); }
.srp-text { margin: 0 0 .6rem; }
.srp-vn { font-family: var(--sans); font-size: .62em; font-weight: 700; color: var(--accent); vertical-align: super; line-height: 0; margin: 0 .15em 0 .3em; }
.srp-v mark { background: color-mix(in srgb, var(--gold) 30%, transparent); color: inherit; border-radius: 3px; padding: .05em 0; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.srp-v.hl .srp-vn { color: var(--ink); }
.srp-cite { font-family: var(--sans); font-size: .78rem; color: var(--muted); margin: .8rem 0 0; }
.srp-note { font-family: var(--sans); font-size: .82rem; background: color-mix(in srgb, var(--gold) 14%, transparent); border-left: 3px solid var(--gold); padding: .5rem .7rem; border-radius: 6px; }
.srp-off { font-family: var(--sans); font-size: .9rem; padding-top: .8rem; }
.srp .tr-notice { font-size: .75rem; }

.srp-foot { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .55rem .8rem; border-top: 1px solid var(--rule); font-family: var(--sans); }
.srp-nav { font-family: var(--sans); font-size: .8rem; font-weight: 650; min-height: 2.5rem; padding: .3rem .8rem; border-radius: 999px; border: 1px solid var(--rule);
  background: var(--paper); color: var(--accent); cursor: pointer; white-space: nowrap; }
.srp-nav:hover { border-color: var(--gold); }
.srp-nav[hidden] { display: inline-block; visibility: hidden; }
.srp-study { font-size: .78rem; color: var(--muted); text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* minimized: a small bar at the bottom of the screen */
.srp-mini { position: fixed; z-index: 69; right: max(1rem, env(safe-area-inset-right)); bottom: max(1rem, env(safe-area-inset-bottom)); display: flex; align-items: center;
  border-radius: 999px; border: 1px solid var(--gold); background: var(--paper); box-shadow: var(--shadow-lift); font-family: var(--sans); max-width: calc(100vw - 2rem); }
.srp-mini[hidden], .srp[hidden], .srp-backdrop[hidden] { display: none; }
.srp-restore { display: inline-flex; align-items: center; gap: .5rem; min-height: 2.75rem; padding: .3rem .4rem .3rem 1rem; background: none; border: 0; color: var(--ink);
  font: inherit; font-size: .85rem; font-weight: 650; cursor: pointer; min-width: 0; }
.srp-restore svg { color: var(--accent); flex: none; }
.srp-mini-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.srp-mini-a { font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.srp-mini-x { width: 2.75rem; height: 2.75rem; border: 0; background: none; color: var(--muted); cursor: pointer; border-radius: 50%; flex: none; }
.srp-mini button:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; border-radius: 999px; }
html.srp-minimized .totop { bottom: calc(max(1rem, env(safe-area-inset-bottom)) + 3.6rem); }
@media (max-width: 699px) {
  .srp-mini { right: .6rem; bottom: .7rem; max-width: calc(100vw - 10.5rem); }
  .srp-mini-a { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .srp-restore { padding-left: .8rem; }
  html.srp-open:not(.srp-minimized) { overflow: hidden; }
}
@media (prefers-reduced-motion: reduce) { .srp, .srp-backdrop { transition: none; } }

@media print {
  .srp, .srp-mini, .srp-backdrop, #srp-live { display: none !important; }
  a.sref { color: inherit !important; text-decoration: none !important; }
  a.sref::after { content: none !important; }
}