/* inveni · share page (/p/{paper_id}) — thin override layer.
   The deck card itself is rendered from the unchanged SPA classes
   (.paper-card / .card-* / .expand-* / .ai-summary-* / .figures-*).
   This file only handles page chrome (starfield, header, footer) and
   small unsticks for share context. */

html, body { margin: 0; padding: 0; }

body.share-body {
  background: #000;
  color: var(--fg-1);
  font-family: var(--font-sans);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  position: relative;   /* anchor for the canvas/page-layer z-index stack */
  overflow-x: hidden;
}

/* ─── Starfield canvas (lifted from /info — same painter) ─────────────── */
#stars {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  display: block;
}
body.share-body > *:not(#stars) {
  position: relative;
  z-index: 1;
}
@media (prefers-reduced-motion: reduce) {
  #stars { opacity: 0.6; }
}

/* ─── Header ──────────────────────────────────────────── */
.share-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--s-4) var(--s-5);
  border-bottom: 1px solid var(--border-hair);
  /* Slight scrim so the header sits on top of the starfield without
     drowning it. */
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: saturate(160%) blur(10px);
  -webkit-backdrop-filter: saturate(160%) blur(10px);
  position: sticky;
  top: 0;
  z-index: 5;
}
.share-brand {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}
.share-logo {
  height: 30px;
  width: auto;
  display: block;
  /* png is the full lockup (mark + wordmark) on transparent — the dark
     bg makes it sit cleanly. */
}

.share-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  padding: var(--s-2) var(--s-5);
  background: var(--fg-1);
  color: #000;
  font-weight: 600;
  font-size: var(--t-body-s);
  border-radius: var(--r-pill);
  text-decoration: none;
  transition: transform var(--dur-1) var(--ease-out),
              background var(--dur-1) var(--ease-out),
              box-shadow var(--dur-2) var(--ease-out);
  box-shadow: var(--elev-1);
}
.share-cta:hover {
  transform: translateY(-1px);
  background: #fff;
  box-shadow: var(--glow-azure);
}

/* ─── Main + card wrapper ─────────────────────────────── */
.share-main {
  flex: 1 0 auto;
  width: 100%;
  max-width: 760px;
  margin: var(--s-6) auto var(--s-10);
  padding: 0 var(--s-4);
}
.share-card-wrap {
  position: relative;
  width: 100%;
}

/* Tame the deck card for a static page (deck's .paper-card is
   position:absolute for the swipe-stack; .active-card already pins it
   to relative + unclamps the abstract, so this is mostly cosmetic). */
.share-paper-card.paper-card {
  cursor: default;
}

/* Bump the expand-content ceilings — a static share view should never
   clip a long structured summary or many figures. */
.share-paper-card .expand-content.expanded.with-summary,
.share-paper-card .expand-content.expanded:has(.ai-summary-structured) {
  max-height: 3000px;
}
.share-paper-card .expand-content.expanded.with-carousel,
.share-paper-card .expand-content.expanded:has(.figures-carousel) {
  max-height: 4000px;
}

.share-paper-card.swipe-in { animation: none; }

/* ─── Top-right card actions (like + Zotero) ──────────── */
/* .zotero-icon-btn (right:0.75rem) comes from app-shell.css unchanged;
   the like button takes the SPA share button's slot at right:3.25rem.
   Reserve the corner so the source line never slides under the circles. */
.share-paper-card .card-source { padding-right: 5.5rem; }

.share-like-btn {
  position: absolute;
  top: 0.75rem;
  right: 3.25rem;
  width: 2rem;
  height: 2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(111, 191, 139, 0.10);
  border: 1px solid rgba(111, 191, 139, 0.40);
  border-radius: 50%;
  color: var(--signal-leaf);
  cursor: pointer;
  padding: 0;
  z-index: 4;
  transition: all var(--dur-1) var(--ease-out);
}
.share-like-btn:hover {
  background: var(--signal-leaf);
  color: #08130c;
  transform: scale(1.05);
}
.share-like-btn.liked {
  background: var(--signal-leaf);
  border-color: var(--signal-leaf);
  color: #08130c;
}
.share-like-btn.liked svg { fill: currentColor; }
.share-like-btn:disabled { opacity: 0.55; cursor: default; }

/* ─── Toast ───────────────────────────────────────────── */
.share-toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%) translateY(8px);
  background: var(--ink-700);
  color: var(--fg-1);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-pill);
  padding: 0.6rem 1.1rem;
  font-family: var(--font-sans);
  font-size: var(--t-body-s);
  box-shadow: var(--elev-2);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-2) var(--ease-out),
              transform var(--dur-2) var(--ease-out);
  z-index: 50;
  max-width: min(90vw, 480px);
  text-align: center;
}
.share-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ─── Status cards (loading / error) ──────────────────── */
.share-status-card {
  background: var(--ink-700);
  border: 1px solid var(--border-hair);
  border-radius: var(--r-md);
  padding: var(--s-8) var(--s-6);
  box-shadow: var(--elev-2);
  text-align: center;
  color: var(--fg-2);
}
.share-status-card h2 {
  color: var(--fg-1);
  font-family: var(--font-sans);
  font-size: var(--t-h2);
  font-weight: 600;
  margin: 0 0 var(--s-3);
}
.share-status-card .share-cta { margin-top: var(--s-4); }

/* ─── Footer ──────────────────────────────────────────── */
.share-footer {
  flex: 0 0 auto;
  border-top: 1px solid var(--border-hair);
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: saturate(160%) blur(10px);
  -webkit-backdrop-filter: saturate(160%) blur(10px);
  text-align: center;
  padding: var(--s-5) var(--s-4);
  color: var(--fg-3);
  font-family: var(--font-sans);
  font-size: var(--t-body-s);
}
.share-footer p { margin: 0; }
.share-footer a { color: var(--fg-2); text-decoration: none; font-weight: 600; }
.share-footer a:hover { color: var(--fg-1); }
.share-footer-cta { color: var(--signal-azure); margin-left: var(--s-2); }

/* ─── KaTeX legibility on dark surfaces ───────────────── */
/* Containment, the scroll rail and the .katex-error guard live in
   components.css, which this page loads too — the deck card and the
   share card must never drift again. Only share-local bits below. */
.katex { color: inherit; }
.katex .mfrac .frac-line { border-bottom-color: currentColor; }

/* ─── Mobile ──────────────────────────────────────────── */
@media (max-width: 560px) {
  .share-header { padding: var(--s-3) var(--s-4); }
  .share-logo { height: 26px; }
  .share-main { margin: var(--s-4) auto var(--s-8); padding: 0 var(--s-3); }

  /* share.html does NOT load mobile.css, so mirror its phone trim for
     display math here or a shared card reads looser than a deck card.
     Doubled selector: katex.min.css loads after this file. */
  .katex-display.katex-display { margin: 0.55em 0; }
  .katex-display::-webkit-scrollbar { height: 6px; }
}