/*
 * Help centre (/help) — our own stylesheet, written from scratch (owner 10-17: no file copied from the old help centre).
 * Replaces the five imported site-builder files. The page markup still carries the builder's class names
 * (notion-*, super-*); this file gives them a plain docs look.
 * Ref: Stripe Docs / Shopify Help Center — a ~720 px reading column, an "in this page" list beside it on wide screens,
 * one column on phones; WCAG 2.2 AA colours (1.4.3), visible focus (2.4.7 / 2.4.11), reduced motion (2.3.3).
 * Fonts: Anuphan (body) / Mitr (headings) from ea6133176408e450.css; brand colours from /brand/tokens.css (--kit-*).
 *
 *  1. tokens          2. base             3. top bar          4. page frame + widths
 *  5. page header     6. breadcrumb       7. text blocks      8. inline marks + colours
 *  9. lists          10. pictures/video  11. callout, quote, toggle, divider
 * 12. columns + "in this page" list      13. tables          14. code
 * 15. page links, cards, files           16. footer          17. phones         18. motion
 * 19. search dialog + code copy (help-search.js)
 */

/* 1. tokens ----------------------------------------------------------------------------------------------------- */
:root {
  color-scheme: light;
  --h-primary: var(--kit-primary, #1e5da3);
  --h-primary-hover: var(--kit-primary-hover, #123a6a);
  --h-primary-tint: var(--kit-primary-light, #dcebfa);
  --h-text: #1f2937;
  --h-muted: #4b5563;
  --h-faint: #5f6670;
  --h-line: #e5e7eb;
  --h-line-strong: #d1d5db;
  --h-surface: #f8fafc;
  --h-surface-2: #f1f5f9;
  --h-radius: 8px;
  --h-gutter: 24px;
  --h-measure: 720px;
  --h-rail: 0px;
  --h-nav-h: 64px;
  --h-body: "Anuphan", "Noto Sans Thai", system-ui, -apple-system, "Segoe UI", sans-serif;
  --h-head: "Mitr", "Anuphan", system-ui, sans-serif;
  --h-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  /* names the page markup uses in its inline styles */
  --column-spacing: 32px;
  --navbar-shadow: 0 1px 0 var(--h-line);
  --color-text-default: var(--h-text);
  --color-text-default-light: var(--h-faint);
  --color-color-default: transparent;
  --color-undefined: transparent;
}

/* 2. base ------------------------------------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  margin: 0;
  background: #fff;
  color: var(--h-text);
  font-family: var(--h-body);
  font-size: 1rem;
  line-height: 1.7;
  overflow-wrap: break-word;
}
img,
svg,
video {
  max-width: 100%;
}
strong,
b {
  font-weight: 600;
}
[hidden] {
  display: none !important;
}
a {
  color: var(--h-primary);
}
:focus-visible {
  outline: 2px solid var(--h-primary);
  outline-offset: 2px;
  border-radius: 4px;
}
[id] {
  scroll-margin-top: calc(var(--h-nav-h) + 16px);
}
::selection {
  background: var(--h-primary-tint);
}
.super-root {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}

/* 3. top bar ---------------------------------------------------------------------------------------------------- */
.super-navbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgb(255 255 255 / 0.96);
  -webkit-backdrop-filter: saturate(1.5) blur(8px);
  backdrop-filter: saturate(1.5) blur(8px);
}
.super-navbar__content {
  display: flex;
  align-items: center;
  gap: 16px;
  max-width: 1280px;
  height: var(--h-nav-h);
  margin: 0 auto;
  padding: 0 var(--h-gutter);
}
.super-navbar__content > div[style] {
  margin-left: auto;
}
.super-navbar__logo {
  display: flex;
  align-items: center;
  flex: none;
}
.super-navbar__logo-image img {
  display: block;
  width: auto;
  height: 36px;
}
.super-navbar__item-list {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.super-navbar__item {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 12px;
  border-radius: 6px;
  color: var(--h-muted);
  font-size: 0.9375rem;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}
.super-navbar__item:hover {
  background: var(--h-surface-2);
  color: var(--h-text);
}
/* the menu panel came from the old site's script, which is gone: no dead button. Search is ours (help-search.js
   turns the inert icon into a button; until it runs the icon stays out) */
.super-navbar__menu-open,
.super-navbar__viewport-wrapper,
div.super-navbar__search {
  display: none;
}
.super-navbar__actions {
  display: flex;
  flex: none;
  align-items: center;
}

/* 4. page frame + widths ---------------------------------------------------------------------------------------- */
.super-content-wrapper {
  flex: 1 0 auto;
}
.super-content {
  padding-bottom: 64px;
}
.notion-header__content,
.notion-root {
  width: min(100% - 2 * var(--h-gutter), var(--h-measure) + var(--h-rail));
  margin-inline: auto;
  padding-inline-end: var(--h-rail);
}
/* hub pages (cards, many columns, the questions table) get a wider frame */
.page__index,
.page__user-manual,
.page__faq,
.page__developers,
.page__troubleshooting,
.page__legal {
  --h-measure: 1040px;
}
/* a page with an "in this page" list keeps a rail for it on wide screens (section 12) */
@media (min-width: 1200px) {
  .super-content:has(.notion-root > .notion-column-list > .notion-column > .notion-table-of-contents) {
    --h-rail: 280px;
  }
}

/* 5. page header ------------------------------------------------------------------------------------------------ */
.notion-header__cover {
  height: 40px;
}
.notion-header__cover.has-cover {
  position: relative;
  height: 200px;
  overflow: hidden;
  background: var(--h-surface-2);
}
.notion-header__cover-image {
  display: block;
}
.notion-header__icon-wrapper {
  width: 64px;
  height: 64px;
  margin-bottom: 16px;
  overflow: hidden;
}
.notion-header__icon-wrapper.has-cover {
  margin-top: -40px;
  position: relative;
}
.notion-header__icon-wrapper img,
.notion-header__icon {
  display: block;
  width: 100% !important;
  height: 100% !important;
}
.notion-header__icon-wrapper .notion-icon.text {
  width: 100% !important;
  height: 100% !important;
  font-size: 48px !important;
  line-height: 1;
}
.notion-header__title {
  margin: 0 0 8px;
  font-family: var(--h-head);
  font-size: 2rem;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: #111827;
}

/* 6. breadcrumb ------------------------------------------------------------------------------------------------- */
.notion-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 6px;
  margin: 0 0 24px;
  font-size: 0.875rem;
  color: var(--h-faint);
}
.notion-breadcrumb__item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  color: var(--h-faint);
  text-decoration: none;
}
a.notion-breadcrumb__item:hover {
  color: var(--h-primary);
  text-decoration: underline;
}
.notion-breadcrumb__item:last-child {
  color: var(--h-text);
}
.notion-breadcrumb__icon,
.notion-breadcrumb__item img {
  width: 16px;
  height: 16px;
  flex: none;
}
.notion-breadcrumb__divider {
  color: var(--h-line-strong);
}
.notion-breadcrumb__divider:empty::before {
  content: "/";
}

/* 7. text blocks ------------------------------------------------------------------------------------------------ */
.notion-root {
  font-size: 1rem;
}
.notion-root::after {
  content: "";
  display: block;
  clear: both;
}
/* line breaks typed inside a block are kept (an answer cell with "- item" lines) */
.notion-semantic-string {
  white-space: pre-wrap;
}
.notion-text {
  margin: 6px 0;
}
p.notion-text,
.notion-text__content {
  margin: 0;
  padding: 3px 0;
}
.notion-text:empty {
  margin: 0;
  min-height: 12px;
}
.notion-text__children {
  padding-inline-start: 1.5em;
}
.notion-heading {
  margin: 40px 0 8px;
  font-family: var(--h-head);
  font-weight: 500;
  line-height: 1.4;
  color: #111827;
}
h1.notion-heading {
  font-size: 1.625rem;
}
h2.notion-heading {
  font-size: 1.375rem;
}
h3.notion-heading {
  margin-top: 28px;
  font-size: 1.1875rem;
}
.notion-heading strong {
  font-weight: inherit;
}
.notion-heading__anchor {
  display: block;
}
.notion-anchor {
  display: none;
}
.notion-root a {
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.notion-root a:hover {
  color: var(--h-primary-hover);
  text-decoration-thickness: 2px;
}

/* 8. inline marks + colours ------------------------------------------------------------------------------------- */
.color-default {
  color: inherit;
}
.color-gray {
  color: #5b616b;
}
.color-brown {
  color: #7c4a2d;
}
.color-orange {
  color: #9a3412;
}
.color-yellow {
  color: #8a4b08;
}
.color-green {
  color: #22663a;
}
.color-blue {
  color: #1d4ed8;
}
.color-purple {
  color: #6d28d9;
}
.color-pink {
  color: #ad1457;
}
.color-red {
  color: #b91c1c;
}
.highlighted-background {
  padding: 0 3px;
  border-radius: 3px;
}
.bg-gray,
.bg-gray-light {
  background: #f3f4f6;
}
.bg-brown,
.bg-brown-light {
  background: #f6eee9;
}
.bg-orange,
.bg-orange-light {
  background: #fff1e6;
}
.bg-yellow {
  background: #fef3c7;
}
.bg-yellow-light {
  background: #fefbe8;
}
.bg-green,
.bg-green-light {
  background: #e8f6ec;
}
.bg-blue,
.bg-blue-light {
  background: #e8f1fb;
}
.bg-purple,
.bg-purple-light {
  background: #f3f0ff;
}
.bg-pink,
.bg-pink-light {
  background: #fdf0f6;
}
.bg-red {
  background: #fde2e2;
}
.bg-red-light {
  background: #fef3f2;
}
/* button and menu names inside a sentence: a chip (pink text is set in phone.css) */
code.code {
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--h-surface-2);
  font-family: inherit;
  font-size: 0.9em;
  white-space: normal;
}
.notion-at {
  color: var(--h-faint);
}
.notion-pill {
  display: inline-block;
  margin: 2px 4px 2px 0;
  padding: 0 8px;
  border-radius: 999px;
  font-size: 0.8125rem;
  line-height: 1.6;
  white-space: nowrap;
  background: #eef0f3;
  color: #374151;
}
.pill-brown {
  background: #f3e8e1;
  color: #6b3e26;
}
.pill-orange {
  background: #ffedd5;
  color: #9a3412;
}
.pill-yellow {
  background: #fef3c7;
  color: #854d0e;
}
.pill-green {
  background: #dcfce7;
  color: #166534;
}
.pill-blue {
  background: #dbeafe;
  color: #1e40af;
}
.pill-purple {
  background: #ede9fe;
  color: #5b21b6;
}
.pill-pink {
  background: #fce7f3;
  color: #9d174d;
}
.pill-red {
  background: #fee2e2;
  color: #991b1b;
}

/* 9. lists ------------------------------------------------------------------------------------------------------ */
.notion-bulleted-list,
.notion-numbered-list {
  margin: 4px 0;
  padding-inline-start: 1.6em;
}
.notion-list-item {
  margin: 2px 0;
  padding: 2px 0 2px 2px;
}
.notion-list-item::marker {
  color: var(--h-muted);
}
.notion-bulleted-list .notion-bulleted-list {
  list-style-type: circle;
}
.notion-bulleted-list .notion-bulleted-list .notion-bulleted-list {
  list-style-type: square;
}

/* 10. pictures / video ------------------------------------------------------------------------------------------ */
.notion-image {
  margin: 16px 0;
}
.notion-image.align-center {
  text-align: center;
}
.notion-image img {
  display: inline-block;
  max-width: 100%;
  height: auto;
  vertical-align: top;
  border-radius: 6px;
}
.notion-image > span,
.notion-image > a {
  display: block;
}
.notion-caption {
  display: block;
  margin-top: 6px;
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--h-faint);
}
.notion-image.align-center .notion-caption {
  text-align: center;
}
.notion-video,
.notion-embed {
  display: block;
  margin: 16px 0;
}
.notion-video__content img,
.notion-video__content video {
  max-width: 100%;
  height: auto;
}
.notion-embed__container__wrapper {
  position: relative;
}
.notion-embed__container {
  position: absolute;
  inset: 0;
  max-width: 100%;
}
.notion-embed__loader {
  display: none !important;
}

/* 11. callout, quote, toggle, divider --------------------------------------------------------------------------- */
.notion-callout {
  display: flex;
  gap: 12px;
  margin: 16px 0;
  padding: 14px 16px;
  border-radius: var(--h-radius);
  background: var(--h-surface);
}
.notion-callout.border {
  border: 1px solid rgb(17 24 39 / 0.08);
}
.notion-callout__icon {
  flex: none;
  display: flex;
  padding-top: 3px;
  color: var(--h-muted);
}
.notion-callout__icon svg {
  width: 20px;
  height: 20px;
}
.notion-callout__content {
  flex: 1;
  min-width: 0;
}
.notion-callout__content > :first-child {
  margin-top: 0;
}
.notion-callout__content > :last-child {
  margin-bottom: 0;
}
.notion-quote {
  margin: 16px 0;
  padding: 2px 0 2px 16px;
  border-inline-start: 3px solid var(--h-line-strong);
  color: var(--h-muted);
}
.notion-toggle {
  margin: 8px 0;
  padding: 10px 14px;
  border: 1px solid var(--h-line);
  border-radius: var(--h-radius);
}
.notion-toggle__summary {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-weight: 600;
}
.notion-toggle__trigger_icon {
  display: inline-block;
  color: var(--h-muted);
  transform: rotate(90deg);
}
/* the old site's script opened these; without it the answers stay readable: always open */
.notion-toggle__content {
  display: block !important;
  margin-top: 6px;
  padding-inline-start: 18px;
}
.notion-divider {
  height: 1px;
  margin: 28px 0;
  background: var(--h-line);
}

/* 12. columns + "in this page" list ----------------------------------------------------------------------------- */
.notion-column-list {
  display: flex;
  margin: 12px 0;
}
.notion-column {
  flex-grow: 1;
  min-width: 0;
}
.notion-column > :first-child {
  margin-top: 0;
}
/* a column left with only hidden (removed) videos takes no room; its neighbour widens */
.notion-column:not(:has(> :not([hidden], [style*="display:none"], .notion-text:empty))) {
  display: none;
}
.notion-table-of-contents {
  margin: 4px 0 8px;
  padding: 0;
  list-style: none;
  font-size: 0.9375rem;
  line-height: 1.5;
}
.notion-table-of-contents__item a {
  display: block;
  padding: 4px 0;
  color: var(--h-muted);
  text-decoration: none;
}
.notion-table-of-contents__item a:hover {
  color: var(--h-primary);
  text-decoration: underline;
}
.notion-table-of-contents__item a > div[style*="24px"] {
  margin-inline-start: 14px !important;
  font-size: 0.875rem;
}
.notion-table-of-contents__item a > div[style*="48px"] {
  margin-inline-start: 28px !important;
  font-size: 0.875rem;
}
/* wide screens: the row that holds the list opens up, the list itself hangs in the rail and stays in view */
@media (min-width: 1200px) {
  .notion-root > .notion-column-list:has(> .notion-column > .notion-table-of-contents) {
    display: contents;
  }
  .notion-root > .notion-column-list:has(> .notion-column > .notion-table-of-contents) > .notion-column:not(:has(> .notion-table-of-contents)) {
    width: auto !important;
    margin-inline-start: 0 !important;
  }
  .notion-root > .notion-column-list > .notion-column:has(> .notion-table-of-contents) {
    position: sticky;
    top: calc(var(--h-nav-h) + 24px);
    z-index: 1;
    float: right;
    clear: right;
    width: 240px !important;
    max-height: calc(100vh - var(--h-nav-h) - 48px);
    margin: 0 calc(-1 * var(--h-rail)) 0 40px !important;
    padding: 4px 0 4px 16px;
    overflow-y: auto;
    border-inline-start: 1px solid var(--h-line);
    font-size: 0.875rem;
  }
  .notion-column:has(> .notion-table-of-contents) > .notion-text__content {
    padding: 0 0 4px;
    font-size: 0.8125rem;
    color: var(--h-text);
  }
}

/* 13. tables ---------------------------------------------------------------------------------------------------- */
.notion-table__wrapper,
.notion-collection-table__wrapper {
  margin: 16px 0;
  overflow-x: auto;
  border: 1px solid var(--h-line);
  border-radius: var(--h-radius);
  -webkit-overflow-scrolling: touch;
}
/* a table wider than its box says so: a soft shade on the side that still has columns (qa3 h-mvc0w4et146) */
.notion-table__wrapper,
.notion-collection-table__wrapper {
  background:
    linear-gradient(to right, var(--h-bg, #fff) 30%, transparent) left / 24px 100% no-repeat local,
    linear-gradient(to left, var(--h-bg, #fff) 30%, transparent) right / 24px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgb(0 0 0 / 0.14), transparent) left / 10px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgb(0 0 0 / 0.14), transparent) right / 10px 100% no-repeat scroll;
}
/* phones: a simple key / description table wraps its words instead of leaving the screen (the page's inline
   min-widths were for a desktop column) */
@media (max-width: 640px) {
  .notion-table td {
    min-width: 0 !important;
    max-width: none !important;
    overflow-wrap: break-word;
  }
}
/* list tables keep the column widths the page sets (th style="width:…") and scroll sideways when wider */
.notion-collection-table {
  table-layout: fixed;
  width: max-content;
  min-width: 100%;
}
/* a key / description table fills its framed box: without it the rows stop short of the frame with empty space on
   the right (telegram-testers h-mvnf5c8u1fb, 1366); a wider table still scrolls inside its box */
.notion-table {
  min-width: 100%;
}
.notion-table,
.notion-collection-table {
  border-collapse: collapse;
  font-size: 0.9375rem;
  line-height: 1.55;
}
.notion-table td,
.notion-collection-table td,
.notion-collection-table th {
  padding: 10px 12px;
  border-bottom: 1px solid var(--h-line);
  vertical-align: top;
  text-align: start;
}
.notion-table td + td,
.notion-collection-table td + td,
.notion-collection-table th + th {
  border-inline-start: 1px solid var(--h-line);
}
.notion-table tr:last-child td,
.notion-collection-table tbody tr:last-child td {
  border-bottom: 0;
}
.notion-table.col-header tr:first-child td,
.notion-table.row-header td:first-child,
.notion-collection-table th {
  background: var(--h-surface);
  font-weight: 600;
  color: var(--h-text);
}
.notion-collection-table th {
  font-size: 0.8125rem;
  white-space: nowrap;
}
/* a computer shows the whole list table (pm h-mvo0dnz8e2d: the roles table at 1366 scrolled inside a 720 px box with
   empty sides): a page with one gets the hub pages' wide frame, and the columns share the box by their content
   instead of the page's fixed widths. Under 1024 px it scrolls sideways as before (Stripe Docs: wide reference
   tables take the page width) */
@media (min-width: 1024px) {
  .super-content:has(.notion-collection-table__wrapper) {
    --h-measure: 1040px;
  }
  .notion-collection-table {
    table-layout: auto;
    width: 100%;
  }
  .notion-collection-table th {
    width: auto !important;
    white-space: normal;
  }
}
.notion-table__empty-cell {
  min-height: 1em;
}
.notion-property.no-wrap {
  margin: 0;
}
.notion-property__select {
  display: flex;
  flex-wrap: wrap;
}
/* an empty list table left from the old site (header row with no columns) shows nothing */
.notion-collection-table__wrapper:has(thead tr:empty):has(tbody:empty) {
  display: none;
}

/* 14. code ------------------------------------------------------------------------------------------------------ */
.notion-code {
  position: relative;
  margin: 16px 0;
}
.notion-code pre,
.notion-root pre {
  margin: 0;
  padding: 14px 16px;
  overflow-x: auto;
  border: 1px solid var(--h-line);
  border-radius: var(--h-radius);
  /* a line longer than the box: a soft shade on the side that still has text (qa3 h-mvc0xy029d2) */
  background:
    linear-gradient(to right, #f6f8fa 30%, transparent) left / 24px 100% no-repeat local,
    linear-gradient(to left, #f6f8fa 30%, transparent) right / 24px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgb(0 0 0 / 0.14), transparent) left / 10px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgb(0 0 0 / 0.14), transparent) right / 10px 100% no-repeat scroll,
    #f6f8fa;
  color: #1f2328;
  font-family: var(--h-mono);
  font-size: 0.8125rem;
  line-height: 1.6;
  tab-size: 2;
}
.notion-code pre code {
  font-family: inherit;
  white-space: pre;
}
/* the copy button is ours (help-search.js); the old site's own button (icon + English word) stays out */
.notion-code__copy-button:has(> svg) {
  display: none;
}

/* 15. page links, cards, files ---------------------------------------------------------------------------------- */
.notion-page {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 1px 0;
  padding: 5px 8px;
  border-radius: 6px;
  color: var(--h-text);
  text-decoration: none !important;
  line-height: 1.5;
}
a.notion-page:hover {
  background: var(--h-surface-2);
  color: var(--h-primary);
}
.notion-page__icon {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
}
.notion-page__icon img,
.notion-page__icon svg {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.notion-page__title {
  min-width: 0;
}
/* page links inside a sentence (the trail "ศูนย์ช่วยเหลือ / คู่มือ / …" at the top of a page) stay in the line */
.notion-text__content > a.notion-page {
  display: inline-flex !important;
  gap: 6px;
  min-height: 32px !important;
  margin: 0;
  padding: 0 4px;
  vertical-align: middle;
  font-size: 0.9375rem;
}
.notion-text__content > a.notion-page .notion-page__icon {
  width: 16px;
  height: 16px;
}
.notion-icon.text svg {
  width: 100%;
  height: 100%;
}
.notion-collection {
  margin: 16px 0;
}
.notion-collection__header {
  margin: 0 0 8px;
  font-family: var(--h-head);
  font-weight: 500;
}
.notion-collection-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
}
.notion-collection-card {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--h-line);
  border-radius: 12px;
  background: #fff;
}
.notion-collection-card:hover {
  border-color: var(--h-line-strong);
  box-shadow: 0 4px 16px rgb(17 24 39 / 0.08);
}
.notion-collection-card:has(.notion-collection-card__anchor:focus-visible) {
  outline: 2px solid var(--h-primary);
  outline-offset: 2px;
}
.notion-collection-card__anchor {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  color: transparent !important;
  font-size: 0;
}
.notion-collection-card__anchor:focus-visible {
  outline: none;
}
.notion-collection-card__cover {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: var(--h-surface);
}
.notion-collection-card__content {
  padding: 12px 16px 16px;
}
.notion-collection-card__property.title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  line-height: 1.45;
}
.notion-property__title__icon-wrapper {
  display: inline-flex;
  flex: none;
  width: 18px;
  height: 18px;
}
.notion-property__title__icon-wrapper img {
  width: 100%;
  height: 100%;
}
.notion-collection-card__property.notion-property__text {
  margin: 4px 0 0;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--h-faint);
}
.notion-file {
  display: inline-flex;
  margin: 4px 0;
  padding: 6px 10px;
  border: 1px solid var(--h-line);
  border-radius: 6px;
  text-decoration: none !important;
}
.notion-file > div {
  display: flex;
  align-items: center;
  gap: 8px;
}
.notion-file__icon {
  display: flex;
  color: var(--h-muted);
}
.notion-file__title {
  color: var(--h-text);
}
.notion-file__size {
  margin-inline-start: 8px;
  font-size: 0.8125rem;
  color: var(--h-faint);
}

/* 16. footer ---------------------------------------------------------------------------------------------------- */
.super-footer {
  border-top: 1px solid var(--h-line);
  background: var(--h-surface);
}
.super-footer__content {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 24px;
  max-width: 1280px;
  margin: 0 auto;
  padding: 28px var(--h-gutter) 32px;
}
.super-footer__logo-image img {
  display: block;
  width: auto;
  height: 28px;
}
.super-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0 4px;
  margin-inline-start: auto;
}
.super-footer__link {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 10px;
  border-radius: 6px;
  color: var(--h-muted);
  font-size: 0.9375rem;
  text-decoration: none;
}
.super-footer__link p {
  margin: 0;
}
a.super-footer__link:hover {
  background: var(--h-surface-2);
  color: var(--h-text);
}
.super-footer__footnote {
  flex-basis: 100%;
  margin: 0;
  font-size: 0.8125rem;
  color: var(--h-faint);
}

/* 17. phones ---------------------------------------------------------------------------------------------------- */
@media (max-width: 767px) {
  :root {
    --h-gutter: 16px;
    --h-nav-h: 56px;
  }
  .super-navbar__content {
    gap: 8px;
  }
  .super-navbar__logo-image img {
    height: 30px;
    max-width: 136px;
  }
  .super-navbar__item {
    padding: 0 8px;
    font-size: 0.875rem;
  }
  /* breadcrumb: one line, long steps end in … (phone.css keeps the last two steps) */
  .notion-breadcrumb {
    flex-wrap: nowrap;
  }
  .notion-breadcrumb__item {
    flex: 0 1 auto;
    min-width: 0;
  }
  .notion-breadcrumb__title {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .notion-header__cover {
    height: 20px;
  }
  .notion-header__cover.has-cover {
    height: 140px;
  }
  .notion-header__title {
    font-size: 1.625rem;
  }
  h1.notion-heading {
    font-size: 1.4375rem;
  }
  h2.notion-heading {
    font-size: 1.25rem;
  }
  h3.notion-heading {
    font-size: 1.125rem;
  }
  .notion-column-list {
    flex-direction: column;
    gap: 8px;
  }
  .notion-column {
    width: 100% !important;
    margin-inline-start: 0 !important;
  }
  .notion-column:has(> .notion-table-of-contents) {
    padding: 12px 14px;
    border-radius: var(--h-radius);
    background: var(--h-surface);
  }
  .notion-table td,
  .notion-collection-table td,
  .notion-collection-table th {
    padding: 8px 10px;
  }
  .notion-callout {
    padding: 12px;
  }
  .notion-collection-gallery {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
  .notion-collection-card__content {
    padding: 10px 12px 12px;
  }
  .notion-collection-card__property.notion-property__text {
    white-space: normal;
  }
  .super-footer__links {
    margin-inline-start: -10px;
    flex-basis: 100%;
  }
}
@media (max-width: 359px) {
  .notion-collection-gallery {
    grid-template-columns: 1fr;
  }
}

/* 18. motion ---------------------------------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
  .super-navbar__item,
  .super-footer__link,
  .notion-page,
  .notion-collection-card {
    transition:
      background-color 150ms ease,
      color 150ms ease,
      border-color 150ms ease,
      box-shadow 150ms ease;
  }
}
@media print {
  .super-navbar,
  .super-footer {
    display: none;
  }
  .notion-header__content,
  .notion-root {
    width: auto;
    padding: 0;
  }
}

/* 19. search dialog + code copy (help-search.js) ---------------------------------------------------------------- */
/* Ref: Stripe Docs / Algolia DocSearch: a search field in the top bar, a dialog near the top with the results list;
   44 px targets (WCAG 2.5.5), visible focus (2.4.7). Phones: the dialog takes the full width at the top. */
button.super-navbar__search {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 44px;
  min-height: 44px;
  margin-left: 8px;
  padding: 0 10px 0 12px;
  border: 1px solid var(--h-line-strong);
  border-radius: var(--h-radius);
  background: #fff;
  color: var(--h-muted);
  font: inherit;
  font-size: 0.9375rem;
  cursor: pointer;
}
button.super-navbar__search::after {
  content: "/";
  margin-left: 16px;
  padding: 0 6px;
  border: 1px solid var(--h-line-strong);
  border-radius: 4px;
  color: var(--h-faint);
  font: 0.75rem/1.5 var(--h-mono);
}
button.super-navbar__search:hover {
  border-color: var(--h-primary);
  color: var(--h-text);
}
button.super-navbar__search svg {
  flex: none;
  width: 18px;
  height: 18px;
}
.help-search-open {
  overflow: hidden;
}
.help-search {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 10vh 16px 16px;
  background: rgb(15 23 42 / 0.45);
}
.help-search__panel {
  display: flex;
  flex-direction: column;
  width: min(640px, 100%);
  max-height: 70vh;
  overflow: hidden;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 16px 48px rgb(15 23 42 / 0.25);
}
.help-search__row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 10px 10px 16px;
  border-bottom: 1px solid var(--h-line);
}
.help-search__input {
  flex: 1;
  min-width: 0;
  min-height: 44px;
  padding: 0 4px;
  border: 0;
  background: transparent;
  color: var(--h-text);
  font: inherit;
  font-size: 1rem; /* 16 px: iPhone does not zoom into the field */
  outline: none;
}
/* our close button is the one way out: the browser's own clear (×) of a search field stays out */
.help-search__input::-webkit-search-cancel-button,
.help-search__input::-webkit-search-decoration {
  -webkit-appearance: none;
  appearance: none;
}
.help-search__row:focus-within {
  box-shadow: inset 0 -2px 0 var(--h-primary);
}
.help-search__close {
  flex: none;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: var(--h-radius);
  background: transparent;
  color: var(--h-muted);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}
.help-search__close:hover {
  background: var(--h-surface-2);
  color: var(--h-text);
}
.help-search__list {
  overflow-y: auto;
  overscroll-behavior: contain;
}
.help-search__list:not(:empty) {
  padding: 6px;
}
.help-search__item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 44px;
  padding: 8px 12px;
  border-radius: var(--h-radius);
  color: var(--h-text);
  text-decoration: none;
  line-height: 1.45;
}
.help-search__item:hover,
.help-search__item[aria-selected="true"] {
  background: var(--h-primary-tint);
}
.help-search__t {
  font-weight: 600;
}
.help-search__item[aria-selected="true"] .help-search__t {
  color: var(--h-primary-hover);
}
.help-search__d {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  color: var(--h-muted);
  font-size: 0.875rem;
}
.help-search__empty:empty {
  display: none;
}
.help-search__retry {
  display: block;
  min-height: 44px;
  margin: -8px auto 16px;
  padding: 0 16px;
  border: 1px solid var(--h-line-strong);
  border-radius: var(--h-radius);
  background: var(--h-surface);
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.help-search__retry[hidden] {
  display: none;
}
.help-search__empty {
  margin: 0;
  padding: 20px 16px;
  color: var(--h-muted);
  text-align: center;
}
.notion-code__copy-button {
  display: flex;
  align-items: center;
  min-height: 44px;
  margin: 0 0 4px auto;
  padding: 0 14px;
  border: 1px solid var(--h-line-strong);
  border-radius: var(--h-radius);
  background: #fff;
  color: var(--h-muted);
  font: inherit;
  font-size: 0.875rem;
  cursor: pointer;
}
.notion-code__copy-button:hover {
  border-color: var(--h-primary);
  color: var(--h-primary);
}
@media (max-width: 767px) {
  /* logo, both links and the search button fit a 360 px phone */
  .super-navbar__logo-image img {
    max-width: 112px;
  }
  .super-navbar__item {
    padding: 0 6px;
  }
  button.super-navbar__search {
    justify-content: center;
    margin-left: 0;
    padding: 0;
    border: 0;
    background: transparent;
  }
  button.super-navbar__search::after {
    content: none;
  }
  .help-search__label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .help-search {
    padding: 0;
  }
  .help-search__panel {
    width: 100%;
    max-height: 100dvh;
    border-radius: 0 0 12px 12px;
  }
  .help-search__row {
    padding-top: max(10px, env(safe-area-inset-top));
  }
}
@media (max-width: 389px) {
  .super-navbar__content {
    gap: 4px;
  }
  .super-navbar__logo-image img {
    max-width: 92px;
  }
}
@media (prefers-reduced-motion: no-preference) {
  button.super-navbar__search,
  .help-search__item,
  .notion-code__copy-button {
    transition:
      background-color 150ms ease,
      color 150ms ease,
      border-color 150ms ease;
  }
}
@media print {
  .help-search,
  .notion-code__copy-button {
    display: none;
  }
}

/* table cells: the first block starts at the cell's top, so a question and its answer line up (qa3 h-mvc3ewtgcf3) */
.notion-table td > :first-child,
.notion-table__cell > :first-child,
.notion-collection-table td > :first-child,
.notion-collection-table td > * > :first-child {
  margin-top: 0;
}

/* every article picture opens full size (phone.js): say so with the pointer */
.notion-root img:not(a img) {
  cursor: zoom-in;
}