/* =========================================================
   H5 / mobile adaptation layer
   Loaded after the existing stylesheets; only narrows-screen fixes.
   ========================================================= */

/* Wide tables must scroll inside their own box instead of being clipped. */
.table-scroll {
  position: relative;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
}

.table-scroll > table {
  min-width: max-content;
  margin: 0;
}

.table-scroll::-webkit-scrollbar { height: 6px; }
.table-scroll::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.18);
  border-radius: 100px;
}

@media (max-width: 900px) {
  /* Edge hint so it is obvious the table continues sideways. */
  .table-scroll.is-scrollable::after {
    content: "";
    position: sticky;
    top: 0;
    right: 0;
    float: right;
    width: 28px;
    height: 100%;
    margin-left: -28px;
    pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(5, 7, 13, 0.85));
  }
}

@media (max-width: 760px) {
  /* Nothing may push the page sideways. */
  html, body { max-width: 100%; overflow-x: hidden; }
  img, svg, video, canvas { max-width: 100%; }
  pre, code, .evidence-code { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* Long unbroken identifiers (MsgInferReceiptCommitOnlyTx, URLs) must wrap. */
  p, li, td, th, dd, dt, small, figcaption { overflow-wrap: anywhere; }

  .table-scroll > table { font-size: .86rem; }
  .table-scroll th, .table-scroll td { padding: 10px 12px; white-space: normal; }

  /* Comfortable touch targets for real controls (inline prose links excluded). */
  .site-header a, .site-header button,
  nav a, .detail-nav a, .page-nav a, .doc-nav a,
  .entry-primary, .entry-secondary, .button, .chip, .tab, [role="tab"] {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
  }

  /* Respect notches and home indicators. */
  .site-header { padding-left: max(16px, env(safe-area-inset-left));
                 padding-right: max(16px, env(safe-area-inset-right)); }
  footer, .site-footer { padding-bottom: max(28px, env(safe-area-inset-bottom)); }
}

@media (max-width: 420px) {
  .table-scroll > table { font-size: .82rem; }
  .table-scroll th, .table-scroll td { padding: 9px 10px; }
}

/* The language toggle sits with the other header controls. */
.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 13px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.04);
  color: inherit;
  font-size: .78rem;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  transition: border-color .2s ease, background-color .2s ease, color .2s ease;
}

.lang-switch:hover,
.lang-switch:focus-visible {
  border-color: rgba(34, 202, 214, .55);
  background: rgba(34, 202, 214, .1);
}

@media (max-width: 760px) {
  .lang-switch { padding: 6px 11px; font-size: .74rem; }
}

/* Mobile controls and grid children must stay usable at 320px. */
@media (max-width: 760px) {
  .site-header a, .site-header button, .entry-primary, .entry-secondary,
  .hero-actions a, .hero-ctas a, [role="tab"] { min-height: 44px; }
  .detail-layout > *, .entry-layout > *, .wrap > * { min-width: 0; }
  .table-scroll { touch-action: pan-x pan-y; }
  .detail-hero h1, .detail-body h2 { overflow-wrap: anywhere; }
}
@media (max-width: 480px) {
  .template-home .hero .hero-actions .button {
    white-space: normal;
    text-align: center;
    line-height: 1.35;
    min-height: 56px;
    height: auto;
    padding: 10px 12px;
    overflow-wrap: normal;
  }
}