/* ==========================================================================
   togo-page-blog-extra.css — gap-fills for togo-page-blog.css
   ──────────────────────────────────────────────────────────────────────────
   Loaded AFTER togo-page-blog.css. Scope: body[data-page="blog-article"].
   Addresses small leaks found while polishing all 27 blog rest-pages.

   Issues addressed:
     X1  · .article-references__title hard-coded #fff in blog.css
             → unreadable on cream/white in light theme
     X2  · Long peptide sequences in compare-tables overflow the page on
             very narrow viewports (≤380px) → enforce horizontal scroll
             container + smaller monospaced font
     X3  · .article-body img / figure on mobile → guarantee they never
             overflow the column even if missing width/height attrs
     X4  · Mobile-only TOC summary expander → consistent focus ring
             and tap-target size (≥44px)
     X5  · Print-button is shared, but spacing under it on blog-article
             can collide with first <section> on mobile
     X6  · Article-callout label colour on dark theme — keep above
             cite-ref pill so blocks of citations after a callout don't
             blend into the callout background
   ========================================================================== */


/* ── X1 · References section title — light-theme readability ──────────── */
body[data-page="blog-article"] .article-references__title {
  color: var(--color-text);
}
html[data-theme="light"] body[data-page="blog-article"] .article-references__title {
  color: var(--color-text);
}


/* ── X2 · Narrow-viewport peptide-sequence tables ─────────────────────── */
@media (max-width: 480px) {
  body[data-page="blog-article"] .article-compare {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    /* visual cue that table scrolls */
    background-image:
      linear-gradient(to right, var(--color-bg, #0a0a0c), transparent 8px),
      linear-gradient(to left, var(--color-bg, #0a0a0c), transparent 8px);
    background-attachment: local, local;
    background-repeat: no-repeat;
  }
  body[data-page="blog-article"] .article-compare th,
  body[data-page="blog-article"] .article-compare td {
    font-size: 12.5px;
    padding: 8px 10px;
  }
  body[data-page="blog-article"] .article-compare code {
    font-size: 11.5px;
    word-break: break-all;
  }
}
html[data-theme="light"] body[data-page="blog-article"] .article-compare {
  background-image:
    linear-gradient(to right, #faf8f3, transparent 8px),
    linear-gradient(to left, #faf8f3, transparent 8px);
}


/* ── X3 · Body images — never overflow column on mobile ───────────────── */
body[data-page="blog-article"] .article-body img,
body[data-page="blog-article"] .article-body figure,
body[data-page="blog-article"] .article-body svg {
  max-width: 100%;
  height: auto;
}
body[data-page="blog-article"] .article-body figure {
  margin: 24px 0;
}
body[data-page="blog-article"] .article-body figcaption {
  margin-top: 8px;
  font-size: 13px;
  color: var(--color-text-muted);
  text-align: center;
}


/* ── X4 · Mobile TOC summary (when shown as <details> ≤1023px) ────────── */
@media (max-width: 1023px) {
  body[data-page="blog-article"] #togo-toc summary {
    min-height: 44px;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
  }
  body[data-page="blog-article"] #togo-toc summary:focus-visible {
    outline: 2px solid var(--color-accent, #e01b1b);
    outline-offset: 2px;
    border-radius: 6px;
  }
}


/* ── X5 · Spacing under print-button on blog-article mobile ───────────── */
@media (max-width: 640px) {
  body[data-page="blog-article"] .article-hero .print-button {
    margin-top: 8px;
  }
  body[data-page="blog-article"] .article-hero + .section {
    padding-top: clamp(24px, 5vw, 40px);
  }
}


/* ── X6 · Callout/cite-ref visual separation on dark ──────────────────── */
body[data-page="blog-article"] .article-callout a.cite-ref {
  /* Slightly lift the pill inside callouts so it doesn't dissolve into
     the tinted callout background */
  background: rgba(0, 0, 0, 0.20);
}
html[data-theme="light"] body[data-page="blog-article"] .article-callout a.cite-ref {
  background: rgba(0, 0, 0, 0.06);
}

/* ── X7 · Wide comparison tables — contain on desktop too ─────────────── */
body[data-page="blog-article"] .article-compare {
  max-width: 100%;
  table-layout: fixed;
}

body[data-page="blog-article"] .article-compare th,
body[data-page="blog-article"] .article-compare td {
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: normal;
}

body[data-page="blog-article"] .article-compare__num {
  white-space: normal;
}


/* ── Reduced motion safety ────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  body[data-page="blog-article"] .article-compare {
    scroll-behavior: auto;
  }
}