/* =====================================================================
   Scroll containers for tables inside imported article HTML.

   Paired with static/components/article-tables.js, which builds the DOM.
   Shared by the article shell and the legacy /article page, so every rule
   here is scoped to the .mh-tablescroll block and never to a host page's
   own classes.

   The two selectors that reach INSIDE the wrapper (table margin / cell
   wrapping) are deliberately over-qualified with the wrapper class so they
   beat a host page's `.some-content table` rule regardless of which
   stylesheet loads last.
   ===================================================================== */

.mh-tablescroll {
  position: relative;
  /* Takes over the table's own vertical rhythm — the wrapper is now the
     flow child, and the table's margin is zeroed below. */
  margin: 1.4em 0;
  /* A grid/flex item only stops its content forcing the column wider when it
     is allowed to shrink. Without this the wide table pushes the whole
     article column out and the page scrolls sideways. */
  min-width: 0;
  max-width: 100%;
}

/* --- the scrolling viewport ---------------------------------------- */
.mh-tablescroll__viewport {
  overflow-x: auto;
  overflow-y: hidden;
  /* Momentum scrolling on iOS, and stop a horizontal fling at the end of the
     table from chaining into a browser back-swipe or a page pan. */
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  max-width: 100%;
}

/* The table is a plain table again inside the viewport: `width: 100%` fills
   the column when it fits, and the CSS table algorithm floors the used width
   at min-content, so a wide one overflows the viewport and scrolls instead of
   being squeezed. Nothing here shrinks text. */
.mh-tablescroll .mh-tablescroll__viewport > table {
  margin: 0;
  max-width: none;
}

/* Short cells stay on one line so drill-hole ids and numbers are not broken
   at their hyphens. Set per cell by the JS pass (length-gated) rather than
   blanket-applied, so a long footnote cell still wraps. */
.mh-tablescroll .mh-tablescroll__cell--tight {
  white-space: nowrap;
}

/* --- the top rail (second scrollbar) -------------------------------- */
/* A DRAWN track and thumb, not a native scroll container. On every platform
   with overlay scrollbars — macOS with a trackpad, iOS, Android, headless
   Chrome — a native one renders nothing at all and `::-webkit-scrollbar` is
   ignored outright, so the whole feature would silently disappear exactly
   where a second scrollbar is most useful. See the module header. */
.mh-tablescroll__rail {
  display: none;
  position: relative;
  height: 10px;
  border-radius: 5px;
  background: #f1f3f6;
  /* The thumb is dragged with pointer events; without this a touch drag pans
     the page instead. */
  touch-action: none;
}
.mh-tablescroll.is-scrollable .mh-tablescroll__rail {
  display: block;
  margin-bottom: 6px;
}
.mh-tablescroll__thumb {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0;
  min-width: 28px;
  border-radius: 5px;
  background: #b9c0cb;
  cursor: grab;
  touch-action: none;
  transition: background-color 0.15s ease;
}
.mh-tablescroll__thumb:hover { background: #98a1af; }
.mh-tablescroll.is-dragging .mh-tablescroll__thumb {
  background: #7c8695;
  cursor: grabbing;
}
/* Text selection during a drag would fight the gesture and leave the table
   highlighted when it ends. */
.mh-tablescroll.is-dragging {
  user-select: none;
  -webkit-user-select: none;
}

/* --- the viewport's own scrollbar ----------------------------------- */
/* The bottom half of the pair. Visible on classic-scrollbar platforms
   (Windows, Linux, macOS set to "always"); on overlay platforms it appears
   transiently while scrolling, and the drawn rail above covers the gap. */
.mh-tablescroll__viewport {
  scrollbar-width: thin;
  scrollbar-color: #b9c0cb #f1f3f6;
}
.mh-tablescroll__viewport::-webkit-scrollbar {
  height: 10px;
}
.mh-tablescroll__viewport::-webkit-scrollbar-track {
  background: #f1f3f6;
  border-radius: 5px;
}
.mh-tablescroll__viewport::-webkit-scrollbar-thumb {
  background: #b9c0cb;
  border-radius: 5px;
}
.mh-tablescroll__viewport::-webkit-scrollbar-thumb:hover {
  background: #98a1af;
}

/* --- keyboard affordance -------------------------------------------- */
/* The viewport becomes a tab stop only while it scrolls (the JS toggles
   tabindex), so the ring must read as intentional when it lands. */
.mh-tablescroll__viewport:focus-visible {
  outline: 2px solid #1d4ed8;
  outline-offset: 2px;
  border-radius: 2px;
}

/* --- edge cue -------------------------------------------------------- */
/* Tells the reader there is more table off to the side. Pointer-events off so
   it never eats a tap on a cell, and painted on the wrapper (which does not
   scroll) so the fades stay pinned to the visible edges. Inset at the top to
   clear the rail and at the bottom to clear the scrollbar. */
.mh-tablescroll::before,
.mh-tablescroll::after {
  content: '';
  position: absolute;
  top: 16px;
  bottom: 12px;
  width: 26px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease;
  z-index: 1;
}
.mh-tablescroll::before {
  left: 0;
  background: linear-gradient(to right, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0));
}
.mh-tablescroll::after {
  right: 0;
  background: linear-gradient(to left, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0));
}
.mh-tablescroll.is-scrollable:not(.at-start)::before { opacity: 1; }
.mh-tablescroll.is-scrollable:not(.at-end)::after { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .mh-tablescroll::before,
  .mh-tablescroll::after,
  .mh-tablescroll__thumb { transition: none; }
}