/* Help pages on a phone (pm h-muxleldk623, qa2 iPhone 13; docs/phone-layout-standard.md): nothing wider than the
   screen — pictures and videos shrink to fit, side-by-side columns stack, the breadcrumb keeps its last two steps.
   Linked from every page by scripts/help-mirror/finalize.mjs. */
.notion-image img,
.notion-image video,
.notion-root img:not(.notion-breadcrumb__icon),
.notion-root video {
  max-width: 100% !important;
  height: auto !important;
}
/* a row of the old brand's videos we took out (pm media rule) leaves no empty gap (qa3: 'Video' over nothing) */
.notion-column-list:not(:has(.notion-column > :not(.notion-embed[hidden]))) {
  display: none !important;
}
.notion-image img:not(a img) {
  cursor: zoom-in;
}
@media (max-width: 767px) {
  .notion-image,
  .notion-image > *,
  .notion-asset-wrapper,
  .notion-embed {
    width: 100% !important;
    max-width: 100% !important;
  }
  .notion-column-list {
    flex-direction: column !important;
  }
  .notion-column {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .notion-table,
  pre,
  .notion-code {
    display: block;
    max-width: 100%;
    overflow-x: auto;
  }
  /* the breadcrumb: the last two steps only (step / divider / step), cut with … when still too long */
  .notion-breadcrumb {
    display: flex;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
  }
  .notion-breadcrumb > :not(:nth-last-child(-n + 3)) {
    display: none;
  }
  .notion-breadcrumb__item {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  /* qa3 iPhone (rule 4 + nothing cut): every article link is a 44 px finger target and its whole title wraps */
  a.notion-page {
    display: flex !important;
    align-items: center;
    min-height: 44px;
    height: auto !important;
  }
  .notion-page__title {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    overflow-wrap: anywhere;
  }
  .super-footer__link,
  .super-navbar__item {
    display: inline-flex !important;
    align-items: center;
    min-height: 44px;
  }
  /* the page's own icon above its title: a mark, not 40 % of the first screen (the cover band above it stays: the icon
     hangs from it — hiding it took the mark away and left the gap, READY 5 shots) */
  .notion-header__icon-wrapper {
    width: 56px !important;
    height: 56px !important;
  }
  .notion-header__icon {
    width: 56px !important;
    height: 56px !important;
  }
}
/* tap a picture: it opens full screen (pinch to zoom); a tap or Esc closes it */
.help-zoom {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgb(0 0 0 / 0.85);
  touch-action: pinch-zoom;
  overflow: auto;
  cursor: zoom-out;
}
.help-zoom img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* every width: the pink button-name chips (กดปุ่ม <code>เลือกแพ็กเกจ</code>) were #ff4081 on the chip's grey, 3.1:1 — WCAG 2.2
   1.4.3 needs 4.5:1 (axe, S69 category 9); the same pink, darker: ≥ 5:1 also on a grey callout */
.notion-root code.code {
  color: #ad1457 !important;
}