/* dev-doc: 2026-09-17 18:35 help-article-portal */
/* THIS FILE IS THE SOURCE OF TRUTH for the Create-hosted help portal's stylesheet. Edit it directly;
 * there is no SCSS step and nothing compiles over it.
 *
 * It did not start that way. It was ported (F-1) from
 * scribblemaps.com/assets/design2021/scss/help-article.scss and carried a header naming that SCSS as
 * canonical, warning that a hand edit here is lost on the next `npx gulp sass` in that project. That
 * arrangement cannot survive the portal's move: the legacy tree is being deleted (F-12), so the
 * pointer would name a file that does not exist, and F-17/F-18 add rules that exist only here. The
 * alternative - bringing the SCSS into Create with its own compile step - was rejected because it
 * buys nothing: Create has no SASS toolchain, and this is one stylesheet for one self-contained
 * portal shell rather than part of the design2021 system.
 *
 * That SCSS and its compiled CSS are now GONE - deleted with the rest of the legacy site portal in
 * F-12, along with their scribblemaps.com.csproj entries - so `npx gulp sass` in that project no
 * longer produces a competing copy and there is nothing left to overwrite this with by accident. */
.sm-help-portal-header {
  background: #fff;
  border-bottom: 1px solid #e5e7eb;
}
.sm-help-portal-header__inner {
  align-items: center;
  display: flex;
  gap: 3.2rem;
  justify-content: space-between;
  min-height: 8rem;
}

.sm-help-shell {
  box-sizing: border-box;
  margin: 0 auto;
  max-width: 112rem;
  padding-left: 2.4rem;
  padding-right: 2.4rem;
  width: 100%;
}
.sm-help-shell--article, .sm-help-shell--browse {
  max-width: 110rem;
}

.sm-help-portal-name {
  color: #182230;
  flex: 0 0 auto;
  font-family: "Poppins", Arial, sans-serif;
  font-size: 1.8rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-decoration: none;
}
.sm-help-portal-name:hover, .sm-help-portal-name:focus {
  color: #1e50c3;
}
.sm-help-portal-lockup {
  align-items: center;
  display: inline-flex;
  gap: 0.9rem;
  min-width: 0;
}
.sm-help-portal-lockup__logo {
  background: transparent;
  border-radius: 0;
  box-sizing: border-box;
  flex: 0 0 auto;
  height: 3.4rem;
  object-fit: contain;
  padding: 0;
  width: 3.4rem;
}
.sm-help-portal-lockup__title {
  min-width: 0;
}

.sm-help-search {
  align-items: center;
  display: flex;
  max-width: 44rem;
  position: relative;
  width: 100%;
}
.sm-help-search__icon {
  border: 2px solid #667085;
  border-radius: 50%;
  height: 1.2rem;
  left: 1.6rem;
  pointer-events: none;
  position: absolute;
  width: 1.2rem;
}
.sm-help-search__icon::after {
  background: #667085;
  content: "";
  height: 2px;
  position: absolute;
  right: -0.7rem;
  top: 1rem;
  transform: rotate(45deg);
  width: 0.8rem;
}
.sm-help-search input {
  background: #f8fafc;
  border: 1px solid #d0d5dd;
  border-radius: 0.8rem;
  box-sizing: border-box;
  color: #182230;
  font-family: "Poppins", Arial, sans-serif;
  font-size: 1.5rem;
  min-height: 4.6rem;
  padding: 0.9rem 7.8rem 0.9rem 4.4rem;
  width: 100%;
}
.sm-help-search input:focus {
  background: #fff;
  border-color: #1e50c3;
  box-shadow: 0 0 0 3px rgba(64, 114, 238, 0.15);
  outline: 0;
}
.sm-help-search button {
  background: none;
  border: 0;
  color: #1e50c3;
  cursor: pointer;
  font-family: "Poppins", Arial, sans-serif;
  font-size: 1.4rem;
  font-weight: 600;
  padding: 0.8rem 1.4rem;
  position: absolute;
  right: 0.3rem;
}

.sm-help-lang-switcher__trigger {
  align-items: center;
  cursor: pointer;
  display: inline-flex;
  gap: 0.55rem;
}
.sm-help-lang-switcher__flag {
  border-radius: 0.2rem;
  display: inline-block;
  flex: 0 0 auto;
  height: 1.6rem;
  object-fit: cover;
  vertical-align: middle;
  width: 2.4rem;
}

.sm-help-main {
  background: #fff;
  color: #182230;
  font-family: "Poppins", Arial, sans-serif;
  min-height: 48rem;
  padding: 4rem 0 8rem;
}

.sm-help-breadcrumb {
  align-items: center;
  color: #667085;
  display: flex;
  flex-wrap: wrap;
  font-size: 1.35rem;
  gap: 0.8rem;
  line-height: 1.5;
  margin: 0 0 4rem;
}
.sm-help-breadcrumb a {
  color: #475467;
  text-decoration: none;
}
.sm-help-breadcrumb a:hover, .sm-help-breadcrumb a:focus {
  color: #1e50c3;
  text-decoration: underline;
}

.sm-help-page-heading,
.sm-help-article-heading {
  margin: 0 auto 4.8rem;
}
.sm-help-page-heading h1,
.sm-help-article-heading h1 {
  color: #101828;
  font-family: "Poppins", Arial, sans-serif;
  font-size: 4rem;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.15;
  margin: 0;
}
.sm-help-page-heading > p:not(.sm-help-eyebrow):not(.sm-help-locale-notice),
.sm-help-article-heading > p:not(.sm-help-eyebrow):not(.sm-help-locale-notice) {
  color: #667085;
  font-size: 1.8rem;
  line-height: 1.6;
  margin: 1.2rem 0 0;
  max-width: 68rem;
}
.sm-help-page-heading--compact,
.sm-help-article-heading--compact {
  margin-bottom: 2.4rem;
}
.sm-help-page-heading--compact h1,
.sm-help-article-heading--compact h1 {
  font-size: 3.4rem;
}

.sm-help-eyebrow {
  color: #1e50c3;
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  margin: 0 0 1rem;
  text-transform: uppercase;
}

.sm-help-category-grid {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.sm-help-category-card {
  border: 1px solid #e4e7ec;
  border-radius: 1rem;
  box-sizing: border-box;
  min-width: 0;
  padding: 2.4rem;
  transition: border-color 140ms ease, box-shadow 140ms ease;
}
.sm-help-category-card:hover {
  border-color: #c7d7fe;
  box-shadow: 0 8px 24px rgba(16, 24, 40, 0.06);
}
.sm-help-category-card h2 {
  display: inline;
  font-family: "Poppins", Arial, sans-serif;
  font-size: 2rem;
  font-weight: 600;
  line-height: 1.35;
  margin: 0;
}
.sm-help-category-card h2 a {
  color: #101828;
  text-decoration: none;
}
.sm-help-category-card h2 a:hover, .sm-help-category-card h2 a:focus {
  color: #1e50c3;
}
.sm-help-category-card__count {
  color: #667085;
  font-size: 1.35rem;
  margin: 0.6rem 0 1.6rem;
}

.sm-help-category-tree {
  font-size: 1.45rem;
  line-height: 1.5;
  list-style: none;
  margin: 0;
  padding: 0;
}
.sm-help-category-tree ul {
  border-left: 1px solid #e4e7ec;
  list-style: none;
  margin: 0.6rem 0 0.6rem 0.6rem;
  padding-left: 1.4rem;
}
.sm-help-category-tree li {
  margin: 0.8rem 0;
}
.sm-help-category-tree a {
  color: #344054;
  text-decoration: none;
}
.sm-help-category-tree a:hover, .sm-help-category-tree a:focus {
  color: #1e50c3;
  text-decoration: underline;
}

.sm-help-article-page {
  margin: 0 auto;
  max-width: 72rem;
}

.sm-help-article-heading {
  margin-bottom: 3.2rem;
}

.sm-help-article-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.sm-help-article-list > li {
  border-top: 1px solid #e4e7ec;
  padding: 2.2rem 0;
}
.sm-help-article-list > li:last-child {
  border-bottom: 1px solid #e4e7ec;
}
.sm-help-article-list a {
  color: #101828;
  font-size: 1.75rem;
  font-weight: 600;
  line-height: 1.4;
  text-decoration: none;
}
.sm-help-article-list a:hover, .sm-help-article-list a:focus {
  color: #1e50c3;
  text-decoration: underline;
}
.sm-help-article-list p {
  color: #667085;
  font-size: 1.5rem;
  line-height: 1.55;
  margin: 0.7rem 0 0;
}

.sm-help-locale-notice {
  background: #f5f8ff;
  border-left: 3px solid #1e50c3;
  color: #344054;
  font-size: 1.4rem;
  line-height: 1.5;
  margin: 0 0 2.4rem;
  padding: 1.2rem 1.6rem;
}

/* Create-portal only: the legacy scribblemaps.com portal has no match-kind concept, so this rule
 * has no counterpart in that project's help-article.scss and is not lost by a re-copy of the rest.
 * It styles the note the search page shows when EVERY result arrived through the trigram arm -
 * the normal case in a language PostgreSQL ships no stemmer for. Amber rather than the blue of
 * .sm-help-locale-notice on purpose: this is a caveat about the results, not information about
 * them. */
.sm-help-search-note--trigram {
  background: #fffaeb;
  border-left: 3px solid #f79009;
  color: #344054;
  font-size: 1.4rem;
  line-height: 1.5;
  margin: 0 0 2.4rem;
  padding: 1.2rem 1.6rem;
}

.sm-help-fallback-badge {
  background: #f2f4f7;
  border-radius: 999px;
  color: #667085;
  display: inline-block;
  font-size: 1.1rem;
  font-weight: 600;
  margin-left: 0.6rem;
  padding: 0.2rem 0.7rem;
  vertical-align: middle;
}

.sm-help-empty,
.sm-help-updated {
  color: #667085;
  font-size: 1.4rem;
  line-height: 1.5;
}

.sm-help-updated {
  border-top: 1px solid #e4e7ec;
  margin: 4rem 0 0;
  padding-top: 2rem;
}

@media (max-width: 700px) {
  .sm-help-portal-header__inner {
    align-items: stretch;
    flex-direction: column;
    gap: 1.4rem;
    padding-bottom: 1.8rem;
    padding-top: 1.8rem;
  }

  .sm-help-search {
    max-width: none;
  }

  /* Reserve the height of the Scribble AI panel, which is position:fixed at bottom:20px, opens on
     first visit (VC-31) and is 32vh tall below 600px. Without this the last ~32vh of the page can
     never be scrolled clear of it, so anything interactive that comes to rest there is visible but
     untappable - the panel's .scribble-input-row swallows the click. Measured: the mobile spec
     retried the sibling-navigation toggle 331 times over three minutes before timing out, with the
     element reported "visible, enabled and stable" every time.

     Padding rather than a margin on the panel, because the panel is fixed and cannot be moved out
     of the way; the content has to be able to scroll past it instead.

     The panel is 520px capped at 100vh-120px by default, and 32vh only below 600px - a narrower
     breakpoint than this block's 700px. Both cases are covered, here and in the 600px block below,
     because reserving 32vh at 650px wide would leave most of a 520px panel still covering content. */
  .sm-help-main {
    padding: 2.8rem 0 calc(min(520px, 100vh - 120px) + 2rem);
  }

  .sm-help-shell {
    padding-left: 1.8rem;
    padding-right: 1.8rem;
  }

  .sm-help-breadcrumb {
    margin-bottom: 2.8rem;
  }

  .sm-help-page-heading,
.sm-help-article-heading {
    margin-bottom: 3.2rem;
  }
  .sm-help-page-heading h1,
.sm-help-article-heading h1 {
    font-size: 3.2rem;
  }

  .sm-help-category-grid {
    grid-template-columns: 1fr;
  }

  .sm-help-category-card {
    padding: 2rem;
  }
}

/* Phone. Mirrors the assistant's own 600px breakpoint, where the panel drops to 32vh - reserving
   the 520px desktop height here would push the article's own footer most of a screen away for no
   reason. Kept as a separate block, and deliberately at 600px rather than folded into the 700px
   one above, so that if the assistant's breakpoint ever moves, the two numbers that have to agree
   are the same number in both files. */
@media (max-width: 600px) {
  .sm-help-main {
    padding-bottom: calc(32vh + 2rem);
  }
}

.sm-help-article {
  color: #292d34;
  font-family: "Poppins", Arial, sans-serif;
  font-size: 1.6rem;
  font-weight: 300;
  line-height: 1.67;
  word-wrap: break-word;
}
.sm-help-article h2,
.sm-help-article h3,
.sm-help-article h4,
.sm-help-article h5,
.sm-help-article h6 {
  color: #292d34;
  font-weight: 600;
  line-height: 1.3;
  margin: 3.2rem 0 1.2rem;
}
.sm-help-article h2 {
  font-size: 2.6rem;
}
.sm-help-article h3 {
  font-size: 2.2rem;
}
.sm-help-article h4 {
  font-size: 1.9rem;
}
.sm-help-article h5,
.sm-help-article h6 {
  font-size: 1.7rem;
}
.sm-help-article > *:first-child {
  margin-top: 0;
}
.sm-help-article p {
  margin: 0 0 1.6rem;
}
.sm-help-article a {
  color: #1e50c3;
  text-decoration: underline;
}
.sm-help-article a:hover, .sm-help-article a:focus {
  color: #2152c4;
}
.sm-help-article ul,
.sm-help-article ol {
  margin: 0 0 1.6rem;
  padding-left: 2.4rem;
}
.sm-help-article li {
  margin-bottom: 0.6rem;
}
.sm-help-article li > ul,
.sm-help-article li > ol {
  margin: 0.6rem 0 0;
}
.sm-help-article img {
  max-width: 100%;
  height: auto;
  border-radius: 4px;
  margin: 1.6rem 0;
}
.sm-help-article figure {
  margin: 1.6rem 0;
}
.sm-help-article figcaption {
  color: #777777;
  font-size: 1.4rem;
  margin-top: 0.8rem;
}
.sm-help-article .sm-help-table-scroll {
  overflow-x: auto;
  margin: 1.6rem 0;
}
.sm-help-article table {
  border-collapse: collapse;
  width: 100%;
  font-size: 1.5rem;
}
.sm-help-article th,
.sm-help-article td {
  border: 1px solid #cccccc;
  padding: 0.8rem 1.2rem;
  text-align: left;
  vertical-align: top;
}
.sm-help-article th {
  background: #f6f7f9;
  font-weight: 600;
}
.sm-help-article blockquote {
  border-left: 3px solid #cccccc;
  color: #777777;
  margin: 1.6rem 0;
  padding: 0.4rem 0 0.4rem 1.6rem;
}
.sm-help-article code {
  background: #f2f3f5;
  border-radius: 3px;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 0.9em;
  padding: 0.2rem 0.5rem;
}
.sm-help-article pre {
  background: #f2f3f5;
  border-radius: 4px;
  overflow-x: auto;
  padding: 1.2rem 1.6rem;
}
.sm-help-article pre code {
  background: none;
  padding: 0;
}
.sm-help-article hr {
  border: 0;
  border-top: 1px solid #cccccc;
  margin: 2.4rem 0;
}

.sm-help-plans {
  border: 1px solid #cccccc;
  border-radius: 6px;
  margin: 0 0 2.4rem;
  padding: 1.6rem;
}
.sm-help-plans__title {
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  margin: 0 0 1.2rem;
  text-transform: uppercase;
  color: #777777;
}
.sm-help-plans__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.sm-help-plans__item {
  align-items: center;
  border: 1px solid #cccccc;
  border-radius: 999px;
  display: flex;
  font-size: 1.4rem;
  gap: 0.6rem;
  padding: 0.4rem 1.2rem;
}
.sm-help-plans__item--yes {
  border-color: #2dd875;
  color: #14803f;
}
.sm-help-plans__item--no {
  color: #939393;
  text-decoration: line-through;
}

[dir=rtl] .sm-help-article ul,
[dir=rtl] .sm-help-article ol {
  padding-left: 0;
  padding-right: 2.4rem;
}
[dir=rtl] .sm-help-article th,
[dir=rtl] .sm-help-article td {
  text-align: right;
}
[dir=rtl] .sm-help-article blockquote {
  border-left: 0;
  border-right: 3px solid #cccccc;
  padding: 0.4rem 1.6rem 0.4rem 0;
}

/* ---------------------------------------------------------------------------------------------
 * The article sidebar rail (F-17, VC-17).
 *
 * The rail is a DISTINCT COLUMN, not an indent. Three things make it read as one, and all three are
 * measured rather than eyeballed because the failure they prevent is a reader's eye running two
 * entries together into one sentence:
 *   1. a painted right border, so the column has an edge;
 *   2. a 6.4rem gutter to the article body - VC-17's floor is 56px, and this clears it with room
 *      for the border and the rail's own right padding;
 *   3. item separation (2.8rem) that EXCEEDS the leading between wrapped lines inside one entry
 *      (1.4rem x 1.5 = 2.1rem). Titles wrap at this width routinely, so a smaller gap than the
 *      leading would make a two-line title look like two articles.
 * -------------------------------------------------------------------------------------------- */
.sm-help-layout {
  align-items: start;
  column-gap: 6.4rem;
  display: grid;
  grid-template-areas: "sidebar article";
  grid-template-columns: 26rem minmax(0, 1fr);
}

.sm-help-article-page {
  grid-area: article;
  min-width: 0;
}

.sm-help-sidebar {
  border-right: 1px solid #e4e7ec;
  grid-area: sidebar;
  min-width: 0;
  padding-left: 0;
  padding-right: 2.4rem;
}

.sm-help-sidebar__toggle {
  display: none;
}

.sm-help-sidebar__title {
  color: #101828;
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  margin: 0 0 2rem;
  text-transform: uppercase;
}

.sm-help-sidebar__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* No vertical padding on the item on purpose: the gap between entries is then exactly the margin,
 * which is the number VC-17 compares against the leading. Padding here would inflate a single-line
 * entry's height and make it indistinguishable from a wrapped one. */
.sm-help-sidebar__item {
  font-size: 1.4rem;
  line-height: 1.5;
  margin: 0;
  padding: 0;
}

.sm-help-sidebar__item + .sm-help-sidebar__item {
  margin-top: 2.8rem;
}

.sm-help-sidebar__link {
  color: #475467;
  text-decoration: none;
}
.sm-help-sidebar__link:hover, .sm-help-sidebar__link:focus {
  color: #1e50c3;
  text-decoration: underline;
}

.sm-help-sidebar__item--current .sm-help-sidebar__link {
  color: #101828;
  font-weight: 600;
}

/* ---------------------------------------------------------------------------------------------
 * The portal home: search hero over grouped card rows (F-18, VC-18).
 * -------------------------------------------------------------------------------------------- */
.sm-help-home-hero {
  background: #f8fafc;
  border-bottom: 1px solid #eaecf0;
  padding: 4.8rem 0 4rem;
}
.sm-help-home-hero h1 {
  color: #101828;
  font-size: 4rem;
  font-weight: 600;
  line-height: 1.2;
  margin: 0 0 2.4rem;
}

.sm-help-home-search {
  display: flex;
  gap: 1.2rem;
  max-width: 72rem;
}
.sm-help-home-search input[type=search] {
  border: 1px solid #d0d5dd;
  border-radius: 0.8rem;
  flex: 1 1 auto;
  font-family: inherit;
  font-size: 1.6rem;
  min-width: 0;
  padding: 1.4rem 1.8rem;
}
.sm-help-home-search input[type=search]:focus {
  border-color: #1e50c3;
  outline: none;
}
.sm-help-home-search button {
  background: #1e50c3;
  border: 0;
  border-radius: 0.8rem;
  color: #fff;
  cursor: pointer;
  font-family: inherit;
  font-size: 1.5rem;
  font-weight: 500;
  padding: 0 2.8rem;
}

.sm-help-home-group {
  margin: 4.8rem 0 0;
}
.sm-help-home-group__title,
.sm-help-home-browse-all__title {
  color: #101828;
  font-size: 2.4rem;
  font-weight: 600;
  margin: 0 0 2.4rem;
}

/* The complete top-level listing under the curated rows. Same rhythm as a group, but it is a plain
 * grid of links rather than a card row, and it deliberately does not carry .sm-help-home-group. */
.sm-help-home-browse-all {
  margin: 6.4rem 0 0;
}

/* Three to a row, as the Zendesk home laid them out. */
.sm-help-home-group__row {
  display: grid;
  gap: 2.4rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.sm-help-home-card {
  border: 1px solid #e4e7ec;
  border-radius: 1rem;
  min-width: 0;
  overflow: hidden;
  transition: border-color 140ms ease, box-shadow 140ms ease;
}
.sm-help-home-card:hover {
  border-color: #c7d7fe;
  box-shadow: 0 8px 24px rgba(16, 24, 40, 0.06);
}

.sm-help-home-card__link {
  color: #101828;
  display: block;
  text-decoration: none;
}

/* Fixed box with object-fit: the archived assets are whatever size Zendesk's theme used, and
 * letting them set the card height makes every row ragged. */
.sm-help-home-card__image {
  background: #f2f4f7;
  display: block;
  height: 18rem;
  object-fit: cover;
  width: 100%;
}

.sm-help-home-card__name {
  display: block;
  font-size: 1.8rem;
  font-weight: 600;
  padding: 1.6rem 2rem 0;
}

.sm-help-home-card__count {
  color: #667085;
  display: block;
  font-size: 1.35rem;
  padding: 0.4rem 2rem 2rem;
}

/* Single column below this width. The rail's separator is removed WITH the column - a right border
 * on a full-width block is a rule hanging in the middle of the page pointing at nothing. */
@media (max-width: 900px) {
  .sm-help-portal-header__inner {
    column-gap: 1.2rem;
    flex-wrap: wrap;
    padding-bottom: 1.6rem;
    padding-top: 1.6rem;
  }

  .sm-help-portal-lockup {
    flex: 1 1 auto;
  }

  .sm-help-portal-lockup__title {
    font-size: 1.55rem;
  }

  .sm-help-search {
    flex: 1 0 100%;
    max-width: none;
    order: 3;
  }

  .sm-help-layout {
    grid-template-areas: "article" "sidebar";
    grid-template-columns: minmax(0, 1fr);
    row-gap: 3.2rem;
  }

  .sm-help-sidebar {
    border: 1px solid #e4e7ec;
    border-radius: 0.8rem;
    border-right: 0;
    overflow: hidden;
    padding: 0;
  }

  .sm-help-sidebar__toggle {
    align-items: center;
    background: #f8fafc;
    border: 0;
    color: #182230;
    cursor: pointer;
    display: flex;
    font-family: inherit;
    font-size: 1.4rem;
    font-weight: 600;
    justify-content: space-between;
    padding: 1.4rem 1.6rem;
    text-align: left;
    width: 100%;
  }

  .sm-help-sidebar__toggle span {
    transition: transform 140ms ease;
  }

  .sm-help-sidebar.is-open .sm-help-sidebar__toggle span {
    transform: rotate(180deg);
  }

  .sm-help-sidebar__title {
    display: none;
  }

  .sm-help-sidebar__list {
    display: none;
    overflow-wrap: anywhere;
    padding: 0 1.6rem 1.6rem;
  }

  .sm-help-sidebar.is-open .sm-help-sidebar__list {
    display: block;
  }

  .sm-help-article {
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  .sm-help-article img,
  .sm-help-article video,
  .sm-help-article iframe {
    height: auto;
    max-width: 100%;
  }

  .sm-help-article table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
  }

  .sm-help-home-group__row {
    grid-template-columns: minmax(0, 1fr);
  }

  .sm-help-home-hero h1 {
    font-size: 3.2rem;
  }
}