/* Public paper reader — overlay for the pages under /paper/.
   Loaded after css/public.css (public chrome: pub-nav, shell-foot, tokens)
   and paper.css (the reader layout, staged from the atlas stylesheet by
   build_manuscript_web.py). Only the public-specific chrome lives here. */

/* ---------- Status banner ----------
   Same structural role as the internal render's .wip-banner (sticky strip
   under the nav), but stating preprint status rather than draft provenance. */

.preprint-banner {
  background: oklch(95% 0.03 250);
  border-bottom: 1px solid oklch(80% 0.06 250);
  color: oklch(32% 0.06 255);
  padding: var(--sp-2) var(--sp-5);
  font-family: var(--font-display);
  font-size: 13px;
  line-height: 1.5;
  position: sticky;
  top: 0;
  z-index: 40;
}
.preprint-banner a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.preprint-banner strong { font-weight: 600; }
.preprint-badge {
  display: inline-block;
  background: oklch(38% 0.07 255);
  color: oklch(97% 0.01 250);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 999px;
  margin-right: var(--sp-2);
  vertical-align: 1px;
  white-space: nowrap;
}

/* Both the pub-nav (public.css) and the banner want the sticky slot at
   top: 0, and the nav's higher z-index buries the banner as soon as the
   page scrolls. On the paper pages the persistent context worth pinning is
   the status banner, so the nav goes static here and scrolls away — the
   same call the internal reader made for its WIP banner. */
.pub-nav { position: static; }
.pub-nav + .preprint-banner { box-shadow: 0 1px 4px oklch(0% 0 0 / 0.06); }

/* Anchor jumps (contents tree, cross-refs, citation links, backlinks) must
   land BELOW the pinned banner, not underneath it. scroll-margin-top on
   every in-shell anchor target keeps the jumped-to heading/figure/entry
   clear of the sticky strip. */
.paper-shell [id] { scroll-margin-top: 96px; }

/* ---------- Sticky contents tree ----------
   The aside is a grid item stretched to the row height, so the sticky box
   inside it has room to travel. Offset clears the pinned banner. */
.paper-layout .paper-side {
  position: sticky;
  top: 92px;
  align-self: start;
  max-height: calc(100vh - 108px);
  overflow-y: auto;
}

@media (max-width: 640px) {
  .preprint-banner { font-size: 12px; padding: var(--sp-2) var(--sp-3); }
  .paper-layout .paper-side { position: static; max-height: none; }
}

/* ---------- Cross-reference capsule (right rail) ----------
   Inline figure/table references and author–year citations show their
   target as a capsule at the right edge: hover previews transiently,
   click pins it (instead of jumping the page), figures/tables enlarge in
   an overlay. Built by reader_public.js; wide viewports only. */
.xref-capsule {
  position: fixed;
  right: 16px;
  width: min(340px, 26vw);
  z-index: 60;
  background: var(--paper, #fff);
  border: 1px solid var(--rule, #ddd);
  border-radius: 10px;
  box-shadow: 0 8px 28px oklch(0% 0 0 / 0.14);
  padding: 10px 12px 12px;
  font-family: var(--font-display);
  font-size: 12px;
  color: var(--ink-muted, #555);
  display: none;
}
.xref-capsule.is-open { display: block; }
.xref-capsule.is-pinned {
  border-color: oklch(70% 0.06 255);
  box-shadow: 0 10px 32px oklch(0% 0 0 / 0.2);
}
.xref-capsule .xref-label {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 10px;
  margin-bottom: 6px;
  color: var(--ink, #222);
}
.xref-capsule .xref-label-text { flex: 1 1 auto; }
.xref-capsule .xref-jump {
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
  font-size: 11px;
  color: var(--ink-muted, #666);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.xref-capsule .xref-close {
  flex: none;
  border: 0;
  background: none;
  padding: 0 2px;
  font-size: 14px;
  line-height: 1;
  color: var(--ink-muted, #666);
  cursor: pointer;
}
.xref-capsule .xref-close:hover { color: var(--ink, #222); }
.xref-capsule .xref-body.is-zoomable { cursor: zoom-in; }
.xref-capsule .xref-body .csl-entry {
  font-family: var(--font-body);
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--ink, #222);
}
.xref-capsule .xref-body .csl-entry a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.xref-capsule .xref-body img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 6px;
}
.xref-capsule .xref-body table {
  width: 100%;
  border-collapse: collapse;
  font-size: 8.5px;
  line-height: 1.25;
}
.xref-capsule .xref-body .xref-table-clip {
  max-height: 300px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, black 82%, transparent);
          mask-image: linear-gradient(to bottom, black 82%, transparent);
}
.xref-capsule .xref-hint {
  display: block;
  margin-top: 6px;
  font-size: 10px;
  color: var(--ink-muted, #777);
}

/* Enlarged overlay for a capsule click */
.xref-overlay {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: oklch(15% 0.01 260 / 0.72);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 4vh 4vw;
}
.xref-overlay.is-open { display: flex; }
.xref-overlay .xref-sheet {
  background: var(--paper, #fff);
  border-radius: 12px;
  max-width: min(1100px, 92vw);
  max-height: 92vh;
  overflow: auto;
  padding: 20px 24px;
  box-shadow: 0 16px 48px oklch(0% 0 0 / 0.3);
}
.xref-overlay .xref-sheet img { max-width: 100%; height: auto; }

/* ---------- Back to top ----------
   Floating control built by reader_public.js; hidden until the page has
   scrolled well past the first viewport. Sits below the xref capsule in
   the stacking order so a pinned preview is never obscured. */
.back-to-top {
  position: fixed;
  right: 16px;
  bottom: 20px;
  z-index: 55;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid var(--rule, #ddd);
  background: var(--paper, #fff);
  color: var(--ink-muted, #555);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 4px 14px oklch(0% 0 0 / 0.14);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
}
.back-to-top.is-shown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.back-to-top:hover,
.back-to-top:focus-visible {
  color: var(--oxblood, #7a2020);
  border-color: var(--oxblood, #7a2020);
}

/* ---------- Jump-landing highlight ----------
   Applied by reader_public.js when a capsule "jump to" or a ↩ backlink
   lands somewhere in-page: a warm wash that fades, so the eye finds the
   landing entry in a long list. */
.jump-flash {
  animation: jump-flash 2.4s ease-out;
  border-radius: 4px;
}
@keyframes jump-flash {
  0%   { background-color: oklch(88% 0.11 85); box-shadow: -6px 0 0 oklch(70% 0.15 60); }
  45%  { background-color: oklch(88% 0.11 85); box-shadow: -6px 0 0 oklch(70% 0.15 60); }
  100% { background-color: transparent; box-shadow: -6px 0 0 transparent; }
}

/* ---------- Reference list: links + backlinks ---------- */
.csl-entry .ref-link {
  white-space: nowrap;
  font-family: var(--font-mono, monospace);
  font-size: 0.85em;
}
.csl-entry .ref-backlinks {
  margin-left: 6px;
  font-size: 0.85em;
  white-space: nowrap;
}
.csl-entry .ref-backlinks a {
  text-decoration: none;
  margin-left: 2px;
}