frontend/src/styles/_publisher.css

/* ============================================================================ */
/* Publisher-only CSS overrides                                                */
/* Injected into the published static HTML on top of the shared styles.        */
/* Keep this file SMALL - shared styles belong in article.css or components/.  */
/* ============================================================================ */

/* Published page global reset */
body { font-family: var(--default-font-family); color: var(--text-color); }
html { font-size: 16px; line-height: 1.6; background-color: var(--page-bg); overflow-x: hidden; scroll-behavior: smooth; scroll-padding-top: 80px; }

/* Theme toggle icon wrapper (from ThemeToggle.astro) */
#theme-toggle .icon-wrapper {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
}
#theme-toggle .icon-wrapper .icon {
  grid-area: 1 / 1;
  filter: none !important;
}
#theme-toggle .icon-wrapper.animated .icon {
  transition: opacity 0.35s ease;
}
#theme-toggle .icon-wrapper.spin-cw { animation: spin-cw 0.5s cubic-bezier(0.4,0,0.2,1); }
#theme-toggle .icon-wrapper.spin-ccw { animation: spin-ccw 0.5s cubic-bezier(0.4,0,0.2,1); }
@keyframes spin-cw { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes spin-ccw { from { transform: rotate(0deg); } to { transform: rotate(-360deg); } }

/* Override editor-specific .tiptap centering for published output */
.tiptap {
  max-width: 100%;
  padding: 0;
}

/* Wide / full-width helpers (published page uses viewport breakout) */
div[data-component="wide"],
div[data-component="fullWidth"] {
  box-sizing: border-box;
  position: relative;
  z-index: var(--z-elevated, 10);
  background-color: var(--page-bg);
}

div[data-component="wide"] {
  width: min(1100px, 100vw - var(--content-padding-x, 16px) * 4);
  margin-left: 50%;
  transform: translateX(-50%);
  padding: calc(var(--content-padding-x, 16px) * 4);
  border-radius: calc(var(--button-radius, 6px) * 4);
  -webkit-mask:
    linear-gradient(to right, transparent 0px, black 20px, black calc(100% - 20px), transparent 100%),
    linear-gradient(to bottom, transparent 0px, black 20px, black calc(100% - 20px), transparent 100%);
  -webkit-mask-composite: intersect;
  mask:
    linear-gradient(to right, transparent 0px, black 20px, black calc(100% - 20px), transparent 100%),
    linear-gradient(to bottom, transparent 0px, black 20px, black calc(100% - 20px), transparent 100%);
  mask-composite: intersect;
}

div[data-component="wide"] > * {
  margin-bottom: 0 !important;
}

div[data-component="fullWidth"] {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: calc(var(--content-padding-x, 16px) * 4);
  border-radius: calc(var(--button-radius, 6px) * 4);
  -webkit-mask:
    linear-gradient(to bottom, transparent 0px, black 20px, black calc(100% - 20px), transparent 100%);
  mask:
    linear-gradient(to bottom, transparent 0px, black 20px, black calc(100% - 20px), transparent 100%);
}

div[data-component="fullWidth"] figure figcaption {
  text-align: center !important;
}

@media (max-width: 768px) {
  div[data-component="wide"],
  div[data-component="fullWidth"] {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    padding: 0;
    transform: none;
  }
}

/* --- Sidenote: float into the right margin column --- */
div[data-component="sidenote"] {
  float: right;
  clear: right;
  width: 240px;
  margin-right: calc(-240px - 32px);
  margin-top: 0;
  margin-bottom: 0;
  padding: 0;
}

@media (max-width: 1100px) {
  div[data-component="sidenote"] {
    float: none;
    width: auto;
    margin-right: 0;
    margin: 0.75em 0;
    padding: 0 30px;
    border-left: 2px solid var(--border-color);
    border-radius: 0;
  }
}

/* ---------------------------------------------------------------------------
   HTML embed figure (publisher output)
   Structure:
     <figure class="html-embed">
       <div class="html-embed-container"><iframe.../></div>
       <figcaption class="html-embed__desc">...</figcaption>
     </figure>
   --------------------------------------------------------------------------- */
figure.html-embed {
  margin: 24px 0;
  padding: 0;
}

figure.html-embed .html-embed-container {
  width: 100%;
  /* The iframe reports its height via postMessage; min-height is set inline
     by the transformer to the last-known good value so the page doesn't
     jump when the iframe loads (especially with loading="lazy"). */
}

figure.html-embed > .html-embed__desc {
  margin: 8px 0 0;
  font-size: 0.88em;
  line-height: 1.5;
  color: var(--muted-color);
  text-align: center;
}

figure.html-embed > .html-embed__desc strong {
  color: var(--text-color);
  font-weight: 600;
}

/* Hugging Face user profile card styles live in
   `components/_hf-user.css` so they're shared with the editor's
   in-place NodeView and don't drift between author preview and
   published output. */

/* PDF download button in the meta bar (inherits .button for gradient + padding) */
a.button.pdf-link {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  text-decoration: none;
  color: #fff;
}

a.button.pdf-link svg {
  flex-shrink: 0;
}

.meta-container-cell--pdf p {
  margin: 0;
  line-height: 0;
}

/* Image lightbox dialog */
dialog.lightbox { border: none; background: transparent; padding: 0; max-width: 95vw; max-height: 95vh; }
dialog.lightbox::backdrop { background: rgba(0, 0, 0, 0.85); }
dialog.lightbox img { max-width: 95vw; max-height: 90vh; object-fit: contain; border-radius: 4px; }

/* ---------------------------------------------------------------------------
   Inline tooltips for glossary terms and citation links (published page).
   Mirrors the editor's GlossaryView / CitationView popovers, but rendered
   as static HTML revealed via :hover / :focus-within (no JS).
   --------------------------------------------------------------------------- */
.tiptap .glossary-node,
.tiptap .citation-inline {
  position: relative;
}

.tiptap .glossary-node {
  color: var(--primary-color);
  border-bottom: 1px dashed color-mix(in srgb, var(--primary-color) 50%, transparent);
  cursor: help;
}

.tiptap .pub-tooltip {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  display: block;
  width: max-content;
  min-width: 200px;
  max-width: min(320px, 90vw);
  padding: 10px 14px;
  background: var(--bg-tooltip);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  box-shadow: var(--shadow-lg);
  z-index: 50;
  text-align: left;
  white-space: normal;
  font-size: 12px;
  font-style: normal;
  font-weight: normal;
  line-height: 1.45;
  color: var(--text-color);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
}

.tiptap .glossary-node:hover > .pub-tooltip,
.tiptap .glossary-node:focus-visible > .pub-tooltip,
.tiptap .glossary-node:focus-within > .pub-tooltip,
.tiptap .citation-inline:hover > .pub-tooltip,
.tiptap .citation-inline:focus-visible > .pub-tooltip,
.tiptap .citation-inline:focus-within > .pub-tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.tiptap .pub-tooltip__title {
  display: block;
  font-weight: 700;
  font-size: 13px;
  color: var(--text-heading-secondary);
  margin-bottom: 4px;
}

.tiptap .pub-tooltip__body {
  display: block;
  color: var(--muted-color);
}

.tiptap .pub-tooltip__journal {
  display: block;
  color: var(--muted-color);
  font-style: italic;
  font-size: 11.5px;
}

.tiptap .pub-tooltip__doi {
  display: block;
  margin-top: 6px;
  color: var(--text-tertiary);
  font-family: "SFMono-Regular", "Fira Code", monospace;
  font-size: 11px;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Print: don't show tooltips */
@media print {
  .tiptap .pub-tooltip { display: none !important; }
}