/* hotlife blog: mobile table scroll wrapper + swipe hint (added 2026-10-14)
   Loaded site-wide via nginx injection; acts only inside .blog-prose. */

/* Scroll container created by table-scroll-v1.js around every article table */
.blog-prose .table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
  scrollbar-width: thin;
}
.blog-prose .table-scroll > table {
  margin-top: 0;
  margin-bottom: 0;
}

/* Global safeguards: wide media/code inside article body must never stretch the page */
.blog-prose img,
.blog-prose video,
.blog-prose iframe {
  max-width: 100%;
  height: auto;
}
.blog-prose pre {
  max-width: 100%;
  overflow-x: auto;
}

/* Swipe hint plaque (YFI brand: navy #1f2b47 / cyan #2ba6de) */
.table-scroll-hint {
  display: none;
}
@media (max-width: 768px) {
  .table-scroll-hint.tsh-on {
    display: flex;
    align-items: center;
    gap: 7px;
    width: max-content;
    max-width: 100%;
    margin: 0 0 8px auto;
    padding: 5px 12px;
    border-radius: 999px;
    background: #1f2b47;
    border: 1px solid #2ba6de;
    color: #ffffff;
    font-family: Manrope, system-ui, sans-serif;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    transition: opacity 0.35s ease, visibility 0.35s ease;
  }
  .table-scroll-hint.tsh-on svg {
    flex: 0 0 auto;
    animation: tsh-nudge 1.6s ease-in-out infinite;
  }
  .table-scroll-hint.tsh-hide {
    opacity: 0;
    visibility: hidden;
  }
  @keyframes tsh-nudge {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(2.5px); }
  }
}