/* 2FA.HK TRON multisig help mobile containment R4 - 2026-09-19 */

/* Keep every help-page box inside its own card. */
.tron-help-shell,
.tron-help-shell *,
.tron-help-shell *::before,
.tron-help-shell *::after {
  box-sizing: border-box;
}

.tron-help-shell,
.tron-help-layout,
.tron-help-content,
.tron-help-section,
.tron-help-section-head,
.tron-help-section-head > div,
.tron-help-grid,
.tron-help-permission-cards,
.tron-help-defs,
.tron-help-checklist,
.tron-help-checklist > label,
.tron-help-checklist > label > div,
.tron-help-faq,
.tron-help-official-links {
  min-width: 0;
  max-width: 100%;
}

/* Long English protocol names and addresses must wrap instead of pushing cards. */
.tron-help-shell p,
.tron-help-shell li,
.tron-help-shell span,
.tron-help-shell strong,
.tron-help-shell b,
.tron-help-shell summary,
.tron-help-shell a {
  overflow-wrap: anywhere;
  word-break: break-word;
}

.tron-help-checklist > label,
.tron-help-checklist > label > div,
.tron-help-checklist > label p,
.tron-help-section p {
  white-space: normal !important;
}

.tron-help-table-wrap {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}

.tron-help-code {
  max-width: 100%;
  white-space: pre-wrap !important;
  overflow-wrap: anywhere;
  word-break: break-word;
}

@media (max-width: 860px) {
  .tron-help-shell {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden;
  }

  /* Force the desktop sidebar/content grid to one safe mobile column. */
  .tron-help-layout {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .tron-help-toc,
  .tron-help-content {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .tron-help-section {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: hidden;
  }

  .tron-help-section-head {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
    align-items: start;
  }

  .tron-help-section-head > div {
    width: auto !important;
    min-width: 0 !important;
  }

  .tron-help-grid,
  .tron-help-permission-cards,
  .tron-help-defs,
  .tron-help-official-links {
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
  }

  /* This is the area shown overflowing in the user's screenshot. */
  .tron-help-checklist {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .tron-help-checklist > label {
    display: grid !important;
    grid-template-columns: 34px minmax(0, 1fr) !important;
    gap: 8px !important;
    align-items: start !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: hidden;
  }

  .tron-help-checklist > label > span {
    min-width: 0 !important;
    flex: none !important;
  }

  .tron-help-checklist > label > div,
  .tron-help-checklist > label b,
  .tron-help-checklist > label p {
    min-width: 0 !important;
    max-width: 100% !important;
    width: auto !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
  }

  /* Flows such as A -> B -> C can wrap instead of widening the viewport. */
  .tron-help-flow,
  .tron-help-abc {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    flex-wrap: wrap !important;
  }

  .tron-help-flow > *,
  .tron-help-abc > * {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .tron-help-wide,
  .tron-help-btn {
    max-width: 100% !important;
    white-space: normal !important;
  }
}

@media (max-width: 480px) {
  .tron-help-section {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  .tron-help-checklist > label {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  .tron-help-section-head {
    gap: 8px !important;
  }
}