/* Public help center presentation. Single source for public pages and the
   admin iframe preview: black masthead and footer, white content, system
   sans typography, no framework. */

:root {
  --hc-black: #000;
  --hc-white: #fff;
  --hc-gray-900: oklch(0.21 0.034 264.665);
  --hc-gray-700: oklch(0.373 0.034 259.733);
  --hc-gray-600: oklch(0.446 0.03 256.802);
  --hc-gray-500: oklch(0.551 0.027 264.364);
  --hc-gray-400: oklch(0.707 0.022 261.325);
  --hc-gray-300: oklch(0.872 0.01 258.338);
  --hc-gray-200: oklch(0.928 0.006 264.531);
  --hc-gray-100: oklch(0.967 0.003 264.542);
  --hc-muted: oklch(0.97 0 0);
  --hc-placeholder: oklch(0.556 0 0);
  --hc-search-background: #fff;
  --hc-card-hover: oklch(0.205 0 0 / 0.5);
  color-scheme: light dark;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

html,
body {
  margin: 0;
  padding: 0;
}
h1, h2, h3, h4, h5, h6, p, blockquote, figure, pre, dl, dd {
  margin: 0;
}

img, svg, video {
  display: block;
  vertical-align: middle;
}

button, input {
  font: inherit;
}

code, kbd, samp, pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}


.hc-body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--hc-white);
  color: var(--hc-gray-900);
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 16px;
  line-height: 1.5;
}

img {
  max-width: 100%;
  height: auto;
}

.hc-shell {
  width: 100%;
  max-width: 64rem;
  margin: 0 auto;
  padding-left: 1rem;
  padding-right: 1rem;
}

.hc-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Masthead ---------------------------------------------------------------- */

.hc-header {
  flex-shrink: 0;
  background: var(--hc-black);
  color: var(--hc-white);
}

.hc-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  height: 3.5rem;
}

.hc-brand {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--hc-white);
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 600;
  text-decoration: none;
}

.hc-brand:hover {
  color: rgba(255, 255, 255, 0.8);
}

.hc-brand-icon {
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
}

.hc-header-link {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.875rem;
  line-height: 1.25rem;
  text-decoration: none;
  white-space: nowrap;
}

.hc-header-link:hover {
  color: var(--hc-white);
}

/* Main -------------------------------------------------------------------- */

.hc-main {
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* Home hero + native search ----------------------------------------------- */

.hc-hero {
  background: var(--hc-black);
  color: var(--hc-white);
}

.hc-hero-inner {
  max-width: 56rem;
  margin: 0 auto;
  padding: 3rem 1rem;
  text-align: center;
}

.hc-hero-title {
  margin: 0 0 0.5rem;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.25;
}

.hc-search {
  position: relative;
  max-width: 32rem;
  margin: 1.5rem auto 0;
}

.hc-search-icon {
  position: absolute;
  left: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  color: var(--hc-gray-500);
  pointer-events: none;
}

.hc-search-input {
  width: 100%;
  height: 2.75rem;
  padding: 0.25rem 2.25rem;
  border: 0;
  border-radius: 9999px;
  background: var(--hc-search-background);
  color: var(--hc-gray-900);
  font: inherit;
  font-size: 0.875rem;
  line-height: 1.25rem;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  appearance: none;
}
.hc-search-input::-webkit-search-cancel-button,
.hc-search-input::-webkit-search-decoration {
  appearance: none;
}


.hc-search-input::placeholder {
  color: var(--hc-placeholder);
}

.hc-search-input:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 3px oklch(0.708 0 0 / 0.5);
}

.hc-search-clear {
  position: absolute;
  right: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  padding: 0;
  border: 0;
  background: none;
  color: var(--hc-gray-500);
  cursor: pointer;
}

.hc-search-clear:hover {
  color: var(--hc-gray-900);
}

.hc-content {
  flex: 1;
  background: var(--hc-white);
}

.hc-content-inner {
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
}

/* Section cards ------------------------------------------------------------ */

.hc-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

.hc-card {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.25rem;
  border: 1px solid var(--hc-gray-200);
  border-radius: 0.875rem;
  background: var(--hc-white);
  color: inherit;
  text-decoration: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.hc-card:hover {
  border-color: var(--hc-card-hover);
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.hc-card-icon {
  width: 2rem;
  height: 2rem;
  object-fit: contain;
}

.hc-card-emoji {
  font-size: 1.5rem;
  line-height: 2rem;
}

.hc-card-title {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.375;
}

.hc-card:hover .hc-card-title {
  color: var(--hc-gray-600);
}

.hc-card-desc {
  margin: 0;
  font-size: 0.75rem;
  line-height: 1rem;
  color: var(--hc-gray-500);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.hc-card-count {
  margin: auto 0 0;
  padding-top: 0.25rem;
  font-size: 0.75rem;
  line-height: 1rem;
  color: var(--hc-gray-500);
}

/* Search results and article link lists ------------------------------------ */

.hc-results-count {
  margin: 0 0 1rem;
  font-size: 0.75rem;
  line-height: 1rem;
  color: var(--hc-gray-500);
}

.hc-result-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hc-result-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--hc-gray-200);
  border-radius: 0.625rem;
  background: var(--hc-white);
  color: inherit;
  text-decoration: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.hc-result-link:hover {
  border-color: var(--hc-gray-400);
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.hc-chevron {
  flex-shrink: 0;
  width: 1rem;
  height: 1rem;
  color: var(--hc-gray-500);
}

.hc-page .hc-result-link {
  padding-top: 0.875rem;
  padding-bottom: 0.875rem;
}

.hc-result-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.hc-result-title {
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.25rem;
}

.hc-results .hc-result-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hc-result-link:hover .hc-result-title {
  color: var(--hc-gray-600);
}

.hc-result-section {
  font-size: 0.75rem;
  line-height: 1rem;
  color: var(--hc-gray-500);
}

.hc-empty {
  margin: 0;
  padding: 3rem 0;
  text-align: center;
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: var(--hc-gray-500);
}

.hc-empty-state {
  padding: 4rem 0;
  text-align: center;
  color: var(--hc-gray-500);
}

.hc-empty-state p {
  margin: 0.75rem 0 0;
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.hc-empty-icon {
  opacity: 0.3;
}

/* Section page ------------------------------------------------------------- */

.hc-page {
  flex: 1;
  max-width: 48rem;
  min-height: 100vh;
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
}

.hc-breadcrumbs {
  display: flex;
  align-items: center;
  line-height: 1.25rem;
  gap: 0.375rem;
  margin: 0 0 2rem;
  font-size: 0.875rem;
  color: var(--hc-gray-500);
}
.hc-breadcrumbs-wrap {
  flex-wrap: wrap;
}

.hc-breadcrumbs .hc-chevron {
  width: 0.875rem;
  height: 0.875rem;
}

.hc-breadcrumbs-wrap a.hc-crumb {
  flex-shrink: 0;
}

.hc-breadcrumbs-wrap .hc-crumb[aria-current] {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}


.hc-crumb {
  color: inherit;
  text-decoration: none;
}

a.hc-crumb:hover {
  color: var(--hc-gray-900);
}


.hc-crumb[aria-current] {
  color: var(--hc-gray-900);
  font-weight: 500;
}

.hc-section-head {
  margin-bottom: 2rem;
}

.hc-section-icon {
  display: block;
  width: 2.5rem;
  height: 2.5rem;
  margin-bottom: 0.75rem;
  object-fit: contain;
}

.hc-section-emoji {
  display: block;
  margin-bottom: 0.75rem;
  font-size: 1.875rem;
  line-height: 2.25rem;
}

.hc-section-title {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.25;
}

.hc-section-desc {
  margin: 0.5rem 0 0;
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: var(--hc-gray-500);
}

.hc-section-count {
  margin: 0.25rem 0 0;
  font-size: 0.75rem;
  line-height: 1rem;
  color: var(--hc-gray-500);
}

/* Article page ------------------------------------------------------------- */

.hc-article-title {
  margin: 0 0 2rem;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.25;
}

/* Match the original prose-sm / sm:prose type scale and reading measure. */
.hc-prose {
  font-size: 0.875rem;
  line-height: 1.71429;
  color: var(--hc-gray-900);
  overflow-wrap: break-word;
}

.hc-prose p,
.hc-prose ul,
.hc-prose ol,
.hc-prose dl {
  margin: 1.14286em 0;
}

.hc-prose strong {
  color: var(--hc-gray-900);
  font-weight: 600;
}

.hc-prose h1,
.hc-prose h2,
.hc-prose h3,
.hc-prose h4,
.hc-prose h5,
.hc-prose h6 {
  color: var(--hc-gray-900);
  font-size: inherit;
  font-weight: 600;
}

.hc-prose h1 {
  margin: 0 0 0.8em;
  font-size: 2.14286em;
  line-height: 1.2;
}

.hc-prose h2 {
  margin: 1.6em 0 0.8em;
  font-size: 1.42857em;
  line-height: 1.4;
}

.hc-prose h3 {
  margin: 1.55556em 0 0.444444em;
  font-size: 1.28571em;
  line-height: 1.55556;
}

.hc-prose h4 {
  margin: 1.42857em 0 0.571429em;
  line-height: 1.42857;
}

.hc-prose a {
  color: var(--hc-gray-700);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: var(--hc-gray-400);
}

.hc-prose a:hover {
  color: var(--hc-gray-900);
}

.hc-prose img,
.hc-prose picture,
.hc-prose video {
  margin: 1.71429em 0;
}

.hc-prose img {
  border-radius: 0.625rem;
  box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
}


.hc-prose ul,
.hc-prose ol {
  padding-inline-start: 1.57143em;
}

.hc-prose ul {
  list-style-type: disc;
}

.hc-prose ol {
  list-style-type: decimal;
}

.hc-prose ol[type="a"] { list-style-type: lower-alpha; }
.hc-prose ol[type="A"] { list-style-type: upper-alpha; }
.hc-prose ol[type="i"] { list-style-type: lower-roman; }
.hc-prose ol[type="I"] { list-style-type: upper-roman; }

.hc-prose li {
  margin: 0.285714em 0;
  padding-inline-start: 0.428571em;
}

.hc-prose ul > li::marker {
  color: var(--hc-gray-300);
}

.hc-prose ol > li::marker {
  color: var(--hc-gray-500);
  font-weight: 400;
}

.hc-prose li p,
.hc-prose li > p:first-child,
.hc-prose li > p:last-child {
  margin: 1.14286em 0;
}

.hc-prose ul ul,
.hc-prose ul ol,
.hc-prose ol ul,
.hc-prose ol ol {
  margin: 0.571429em 0;
}

.hc-prose code {
  padding: 0 0.25rem;
  border-radius: 0.25rem;
  background: var(--hc-muted);
  color: var(--hc-gray-900);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.25rem;
}

.hc-prose code::before,
.hc-prose code::after {
  content: "`";
}

.hc-prose pre {
  margin: 1.66667em 0;
  padding: 0.666667em 1em;
  border-radius: 0.625rem;
  background: var(--hc-muted);
  color: var(--hc-gray-200);
  font-size: 0.857143em;
  font-weight: 400;
  line-height: 1.66667;
  overflow-x: auto;
}

.hc-prose pre code {
  color: inherit;
  font-weight: inherit;
}

.hc-prose pre code::before,
.hc-prose pre code::after {
  content: none;
}

.hc-prose blockquote {
  margin: 1.33333em 0;
  padding-inline-start: 1.11111em;
  border-inline-start: 4px solid var(--hc-gray-200);
  color: var(--hc-gray-900);
  font-weight: 500;
  font-style: italic;
  quotes: "\201C" "\201D" "\2018" "\2019";
}

.hc-prose blockquote p:first-of-type::before {
  content: open-quote;
}

.hc-prose blockquote p:last-of-type::after {
  content: close-quote;
}

.hc-prose hr {
  margin: 2.85714em 0;
  border: 0;
  border-top: 1px solid var(--hc-gray-200);
  color: inherit;
}

/* Keep the original table presentation while containing horizontal overflow. */
.hc-table-wrap {
  width: 100%;
  margin: 1.5rem 0;
  overflow-x: auto;
}

.hc-table-wrap table {
  width: 100%;
  min-width: max-content;
  margin: 0;
  border-collapse: collapse;
  text-align: start;
  font-size: 0.857143em;
  line-height: 1.5;
}

.hc-prose thead {
  border-bottom: 1px solid var(--hc-gray-300);
}

.hc-prose tbody tr,
.hc-prose tfoot {
  border-bottom: 1px solid var(--hc-gray-200);
}

.hc-prose tbody tr:last-child {
  border-bottom: 0;
}

.hc-prose th,
.hc-prose td {
  padding: 0.666667em 1em;
  vertical-align: baseline;
}

.hc-prose th {
  padding-top: 0;
  color: var(--hc-gray-900);
  font-weight: 600;
  text-align: start;
  vertical-align: bottom;
}

.hc-prose th:first-child,
.hc-prose td:first-child {
  padding-inline-start: 0;
}

.hc-prose th:last-child,
.hc-prose td:last-child {
  padding-inline-end: 0;
}

/* Footer -------------------------------------------------------------------- */

.hc-footer {
  flex-shrink: 0;
  background: var(--hc-black);
  color: var(--hc-white);
}

.hc-footer-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}

.hc-footer-mail {
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: rgba(255, 255, 255, 0.5);
  text-decoration: none;
}

.hc-footer-mail:hover {
  color: rgba(255, 255, 255, 0.8);
}

.hc-social {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

.hc-social-link {
  display: flex;
  color: rgba(255, 255, 255, 0.5);
}

.hc-social-link:hover {
  color: var(--hc-white);
}

/* Error pages --------------------------------------------------------------- */

.hc-error {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 1rem;
  text-align: center;
  background: var(--hc-white);
  color: var(--hc-gray-900);
}

.hc-error-code {
  margin: 0 0 1rem;
  font-size: 3.75rem;
  font-weight: 700;
  line-height: 1;
}

.hc-error-message {
  margin: 0 0 2rem;
  font-size: 1.125rem;
  color: var(--hc-gray-500);
}

.hc-error-link {
  display: inline-flex;
  align-items: center;
  padding: 0.625rem 1.25rem;
  border-radius: 0.5rem;
  background: var(--hc-gray-900);
  color: var(--hc-white);
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
}

.hc-error-link:hover {
  background: var(--hc-gray-700);
}

/* Responsive ---------------------------------------------------------------- */

@media (min-width: 640px) {
  .hc-shell {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  .hc-hero-inner {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  .hc-content-inner {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }

  .hc-hero-inner {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }

  .hc-hero-title {
    font-size: 2.25rem;
    margin-bottom: 0.75rem;
  }

  .hc-search {
    margin-top: 2rem;
  }

  .hc-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hc-brand {
    font-size: 1rem;
    line-height: 1.5rem;
  }

  .hc-footer-inner {
    flex-direction: row;
  }

  .hc-article-title {
    font-size: 1.875rem;
  }

  .hc-prose {
    max-width: 65ch;
    color: var(--hc-gray-700);
    font-size: 1rem;
    line-height: 1.75;
  }

  .hc-prose p,
  .hc-prose ul,
  .hc-prose ol,
  .hc-prose dl,
  .hc-prose li p,
  .hc-prose li > p:first-child,
  .hc-prose li > p:last-child {
    margin-top: 1.25em;
    margin-bottom: 1.25em;
  }

  .hc-prose h1 {
    margin-bottom: 0.888889em;
    font-size: 2.25em;
    line-height: 1.11111;
  }

  .hc-prose h2 {
    margin: 2em 0 1em;
    font-size: 1.5em;
    line-height: 1.33333;
  }

  .hc-prose h3 {
    margin: 1.6em 0 0.6em;
    font-size: 1.25em;
    line-height: 1.6;
  }

  .hc-prose h4 {
    margin: 1.5em 0 0.5em;
    line-height: 1.5;
  }

  .hc-prose img,
  .hc-prose picture,
  .hc-prose video {
    margin-top: 2em;
    margin-bottom: 2em;
  }

  .hc-prose ul,
  .hc-prose ol {
    padding-inline-start: 1.625em;
  }

  .hc-prose li {
    margin: 0.5em 0;
    padding-inline-start: 0.375em;
  }

  .hc-prose ul ul,
  .hc-prose ul ol,
  .hc-prose ol ul,
  .hc-prose ol ol {
    margin-top: 0.75em;
    margin-bottom: 0.75em;
  }

  .hc-prose pre {
    margin: 1.71429em 0;
    padding: 0.857143em 1.142857em;
    font-size: 0.875em;
    line-height: 1.71429;
  }

  .hc-prose blockquote {
    margin: 1.6em 0;
    padding-inline-start: 1em;
  }

  .hc-prose hr {
    margin: 3em 0;
  }

  .hc-table-wrap table {
    font-size: 0.875em;
    line-height: 1.71429;
  }

  .hc-prose th,
  .hc-prose td {
    padding-inline: 0.571429em;
    padding-bottom: 0.571429em;
  }

  .hc-prose td {
    padding-top: 0.571429em;
  }
}

@media (min-width: 1024px) {
  .hc-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.hc-prose picture > img {
  margin: 0;
}

.hc-prose :is(h2, h3, h4) + * {
  margin-top: 0;
}

.hc-prose > :first-child {
  margin-top: 0;
}

.hc-prose > :last-child {
  margin-bottom: 0;
}

@media (prefers-color-scheme: dark) {
  :root {
    --hc-muted: oklch(0.269 0 0);
    --hc-placeholder: oklch(0.708 0 0);
    --hc-search-background: oklch(1 0 0 / 0.045);
    --hc-card-hover: oklch(0.985 0 0 / 0.5);
  }
}
