/* Automatic TOC — v003. Optional --automatic-toc-* variables inherit from the site. */
.automatic-toc {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  position: relative;
  top: auto;
  overflow: visible;
  border-bottom: 1px solid var(--automatic-toc-border-color, var(--tweak-line-block-line-color, #ddd));
  background: var(--automatic-toc-background, var(--siteBackgroundColor, #fff));
  color: var(--automatic-toc-color, var(--paragraphMediumColor, #222));
  font-family: var(--automatic-toc-font-family, var(--body-font-font-family, inherit));
  font-style: var(--automatic-toc-font-style, var(--body-font-font-style, normal));
  font-weight: var(--automatic-toc-font-weight, var(--body-font-font-weight, 400));
  font-size: var(--automatic-toc-font-size, .9375rem);
  letter-spacing: var(--automatic-toc-letter-spacing, normal);
  text-transform: var(--automatic-toc-text-transform, none);
  line-height: 1.25;
  z-index: var(--automatic-toc-z-index, 99);
}
.automatic-toc[hidden] { display: none; }
.automatic-toc[data-toc-layout="contained"] {
  max-width: var(--automatic-toc-max-width, var(--sqs-site-max-width, 100%));
  margin-inline: auto;
}
.automatic-toc[data-toc-layout="full-width"] {
  max-width: 100%;
  padding-inline: var(--automatic-toc-gutter, var(--sqs-site-gutter, 0px));
}
.automatic-toc.is-sticky {
  position: sticky;
  top: var(--automatic-toc-top, var(--automatic-toc-header-bottom, var(--header-height, 0px)));
}
.automatic-toc .automatic-toc__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  column-gap: var(--automatic-toc-gap, .75rem);
  min-width: 0;
  overflow: visible;
  padding-block: var(--automatic-toc-padding-block, .25rem);
  padding-inline: var(--automatic-toc-padding-inline, 0px);
}
.automatic-toc.has-back-link .automatic-toc__inner {
  grid-template-columns: var(--automatic-toc-side-space, 0px) minmax(0, 1fr) var(--automatic-toc-side-space, 0px);
}
/* When the full group cannot fit centred without hitting Back, give scrolling more room. */
.automatic-toc.has-back-link.is-overflowing .automatic-toc__inner {
  grid-template-columns: var(--automatic-toc-side-space, 0px) minmax(0, 1fr);
}
.automatic-toc .automatic-toc__viewport {
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-behavior: auto;
  scroll-snap-type: none;
  scrollbar-width: none;
  touch-action: auto;
}
.automatic-toc.has-back-link .automatic-toc__viewport { grid-column: 2; }
.automatic-toc__viewport::-webkit-scrollbar { display: none; }
.automatic-toc .automatic-toc__list {
  box-sizing: border-box;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: center;
  width: max-content;
  min-width: 100%;
  gap: var(--automatic-toc-link-gap, .125rem);
  margin: 0;
  padding: 2px;
  overflow: visible;
  scroll-snap-type: none;
  touch-action: auto;
  cursor: auto;
  user-select: auto;
}
/* Remove the old gradients, including when legacy aliases have site overrides. */
.automatic-toc .automatic-toc__list::before,
.automatic-toc .automatic-toc__list::after { content: none; display: none; }
.automatic-toc a.automatic-toc__link,
.automatic-toc a.automatic-toc__back {
  box-sizing: border-box;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  min-height: var(--automatic-toc-link-height, 36px);
  height: auto;
  width: auto;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  line-height: inherit;
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
  scroll-snap-align: none;
  background: transparent;
  border: 0;
  box-shadow: none;
  transition: background-color var(--automatic-toc-transition-duration, 220ms) cubic-bezier(.2, .65, .3, 1), color var(--automatic-toc-transition-duration, 220ms) cubic-bezier(.2, .65, .3, 1);
}
.automatic-toc a.automatic-toc__link {
  padding: .375rem var(--automatic-toc-link-padding-inline, .75rem);
  border-radius: var(--automatic-toc-link-radius, 999px);
}
.automatic-toc a.automatic-toc__link.is-active {
  color: var(--automatic-toc-active-color, var(--automatic-toc-background, var(--siteBackgroundColor, #fff)));
  background: var(--automatic-toc-active-background, var(--automatic-toc-color, var(--paragraphMediumColor, #222)));
}
@media (hover: hover) {
  .automatic-toc a.automatic-toc__link:not(.is-active):hover {
    color: inherit;
    background: var(--automatic-toc-hover-background, color-mix(in srgb, currentColor 8%, transparent));
  }
  .automatic-toc a.automatic-toc__back:hover .automatic-toc__back-label { text-decoration-color: currentColor; }
}
.automatic-toc .automatic-toc__back-label {
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: .2em;
  transition: text-decoration-color var(--automatic-toc-transition-duration, 220ms) ease;
}
.automatic-toc a.automatic-toc__back {
  position: relative;
  grid-column: 1;
  grid-row: 1;
  justify-self: start;
  width: max-content;
  max-width: min(14rem, 35vw);
  gap: .5rem;
  padding: .5rem .25rem;
  border-radius: 0;
}
.automatic-toc .automatic-toc__back-label { overflow: hidden; text-overflow: ellipsis; }
.automatic-toc .automatic-toc__back-icon {
  display: inline-block;
  flex: 0 0 auto;
  font-family: var(--automatic-toc-icon-font-family, var(--ui-font-font-family, inherit));
}
.automatic-toc .automatic-toc__back-icon.is-chevron {
  box-sizing: border-box;
  width: .45em;
  height: .45em;
  border: solid currentColor;
  border-width: 0 0 1.5px 1.5px;
  transform: rotate(45deg);
}
.automatic-toc:dir(rtl) .automatic-toc__back-icon.is-chevron { transform: rotate(225deg); }
.automatic-toc a:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.automatic-toc a.automatic-toc__back:focus-visible { outline-offset: -2px; }
@media (max-width: 767px) {
  .automatic-toc { font-size: var(--automatic-toc-font-size-mobile, .9375rem); }
  .automatic-toc[data-toc-layout="full-width"] { padding-inline: var(--automatic-toc-gutter-mobile, var(--sqs-mobile-site-gutter, 0px)); }
  .automatic-toc .automatic-toc__inner { column-gap: .5rem; }
  .automatic-toc a.automatic-toc__link,
  .automatic-toc a.automatic-toc__back { min-height: 44px; }
  .automatic-toc.has-back-link:not(.is-back-stacked) .automatic-toc__back {
    width: 44px;
    min-width: 44px;
    align-self: stretch;
    padding: 0;
    border-inline-end: 1px solid var(--automatic-toc-border-color, var(--tweak-line-block-line-color, #ddd));
  }
  .automatic-toc.has-back-link:not(.is-back-stacked) .automatic-toc__back-label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .automatic-toc.is-back-stacked .automatic-toc__inner { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .automatic-toc.is-back-stacked .automatic-toc__back { justify-content: flex-start; max-width: 100%; }
  .automatic-toc.is-back-stacked .automatic-toc__viewport { grid-column: 1; grid-row: 2; }
}
@media (prefers-reduced-motion: reduce) {
  .automatic-toc a.automatic-toc__link,
  .automatic-toc a.automatic-toc__back,
  .automatic-toc .automatic-toc__back-label { transition: none; }
}
/* Transitional fallback if a browser still has the previous JavaScript cached. */
.blog-item-table-of-contents:not(.automatic-toc) {
  max-width: 100%;
  background: var(--siteBackgroundColor, #fff);
  border-bottom: 1px solid var(--tweak-line-block-line-color, #ddd);
}
.blog-item-table-of-contents:not(.automatic-toc).is-sticky { position: sticky; top: var(--header-height, 0px); z-index: 99; }
.blog-item-table-of-contents:not(.automatic-toc) .table-of-contents-list {
  display: flex; align-items: center; gap: .125rem; overflow-x: auto; padding: .5rem 0;
}
.blog-item-table-of-contents:not(.automatic-toc) a.table-of-contents-item {
  flex: 0 0 auto; padding: .5rem 1rem; white-space: nowrap; border-radius: 999px;
  font-size: var(--automatic-toc-font-size, .9375rem); color: var(--paragraphMediumColor, #222);
}
.blog-item-table-of-contents:not(.automatic-toc) .table-of-contents-item.is-active { background: var(--paragraphMediumColor, #222); color: var(--siteBackgroundColor, #fff); }
.blog-item-table-of-contents:not(.automatic-toc) .back-icon { font-family: var(--ui-font-font-family, inherit); }