/* The help center (Views/Help, docs/20.help-center.md): full width, in the brand's purple, light and dark (the template's
   variables switch with the theme). */

.help-page { --help-surface: #fff; min-height: 100vh; display: flex; flex-direction: column; background: var(--bs-body-bg); }
.dark-style .help-page { --help-surface: #2b2c40; } /* the template's card colour in each theme */
.help-container { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 1.5rem; }
.help-page :is(h1, h2, h3) { line-height: 1.3; } /* the template's are fixed heights for its own sizes: a long title wraps far apart */

/* The banner: the brand purple with a soft glow of the template's info and warning colours */
.help-hero {
  color: #fff;
  padding: 1.5rem 0 2rem;
  background:
    radial-gradient(900px 340px at 88% -10%, rgba(255, 171, 0, .32), transparent 60%),
    radial-gradient(700px 360px at 4% 120%, rgba(3, 195, 236, .30), transparent 60%),
    linear-gradient(135deg, #4f52d8 0%, #696cff 45%, #8c8fff 75%, #b4b6ff 100%);
}
.help-hero-home { padding-bottom: 4.5rem; }
.help-top { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.75rem; }
.help-brand { display: flex; align-items: center; gap: .5rem; color: #fff; text-decoration: none; }
.help-brand:hover { color: #fff; }
.help-brand .brand-logo { height: 30px; filter: brightness(0) invert(1); }
.help-brand .brand-word { font-size: 1.35rem; color: #fff; }
.help-brand .brand-word-ai { color: #dcdcff; }
.help-brand-tag { margin-left: .25rem; padding: .1rem .55rem; border-radius: 1rem; background: rgba(255, 255, 255, .18); font-weight: 500; font-size: .85rem; }
.help-app-link { margin-left: auto; color: #fff; font-weight: 500; opacity: .92; display: inline-flex; align-items: center; white-space: nowrap; }
.help-app-link:hover { color: #fff; opacity: 1; }
.help-title { color: #fff; text-align: center; font-weight: 600; font-size: 2rem; margin: 1.5rem 0 1.5rem; }

/* The search box and what it suggests */
.help-search { position: relative; max-width: 680px; margin: 0 auto; }
.help-hero:not(.help-hero-home) .help-search { max-width: none; margin: 0; }
.help-search form { position: relative; }
.help-search .bx-search { position: absolute; left: 1.15rem; top: 50%; transform: translateY(-50%); font-size: 1.35rem; color: #8592a3; }
.help-search input {
  width: 100%; border: 0; border-radius: .75rem; padding: 1rem 1.25rem 1rem 3.25rem; font-size: 1.05rem;
  color: #384551; background: #fff; box-shadow: 0 .5rem 1.5rem rgba(34, 48, 62, .18); outline: none;
}
.help-search input:focus { box-shadow: 0 0 0 4px rgba(255, 255, 255, .45), 0 .5rem 1.5rem rgba(34, 48, 62, .18); }
.help-suggestions {
  position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + .5rem); max-height: 26rem; overflow-y: auto;
  border-radius: .75rem; background: var(--help-surface); box-shadow: 0 .75rem 2rem rgba(34, 48, 62, .22); padding: .35rem;
}
.help-suggestions:empty { display: none !important; }
.help-suggestion { display: block; padding: .65rem .85rem; border-radius: .5rem; color: var(--bs-body-color); text-decoration: none; }
.help-suggestion:hover, .help-suggestion:focus { background: rgba(var(--bs-primary-rgb), .08); color: var(--bs-body-color); }
.help-suggestion-title { display: block; color: var(--bs-heading-color); font-weight: 500; }
.help-suggestion-meta { display: block; font-size: .8rem; color: var(--bs-primary); }
.help-suggestion-text { display: block; font-size: .85rem; color: var(--bs-secondary-color); }
.help-suggestion-empty { padding: .75rem .85rem; color: var(--bs-secondary-color); }

.help-main { flex: 1; padding-top: 2rem; padding-bottom: 3rem; }
.help-hero-home + .help-main { margin-top: -2.5rem; }

/* Home: the collections */
.help-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.help-card {
  display: flex; flex-direction: column; gap: .4rem; padding: 1.5rem; border-radius: .75rem; text-decoration: none;
  background: var(--help-surface); border: 1px solid var(--bs-border-color); box-shadow: 0 .125rem .5rem rgba(34, 48, 62, .06);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
a.help-card:hover { transform: translateY(-2px); border-color: rgba(var(--bs-primary-rgb), .45); box-shadow: 0 .5rem 1.25rem rgba(34, 48, 62, .1); }
.help-card-icon {
  display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: .5rem;
  background: rgba(var(--bs-primary-rgb), .12); color: var(--bs-primary); font-size: 1.35rem; flex: none;
}
.help-card-title { margin-top: .5rem; color: var(--bs-heading-color); font-weight: 600; font-size: 1.05rem; }
.help-card-text { color: var(--bs-body-color); font-size: .9rem; }
.help-card-count { margin-top: auto; padding-top: .5rem; color: var(--bs-secondary-color); font-size: .8rem; }
.help-card-soon > * { opacity: .55; } /* the card itself stays solid over the banner */

/* Breadcrumb, a collection's head, lists of articles */
.help-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; font-size: .875rem; color: var(--bs-secondary-color); margin-bottom: 1.5rem; }
.help-breadcrumb a { color: var(--bs-body-color); }
.help-breadcrumb a:hover { color: var(--bs-primary); }
.help-collection-head { display: flex; gap: 1rem; align-items: flex-start; margin-bottom: 1.5rem; }
.help-collection-head h1 { font-size: 1.75rem; margin-bottom: .25rem; }
.help-collection-head p { color: var(--bs-body-color); margin: 0; }
.help-list { border-radius: .75rem; background: var(--help-surface); border: 1px solid var(--bs-border-color); overflow: hidden; }
.help-list-item { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.25rem; text-decoration: none; color: var(--bs-body-color); }
.help-list-item + .help-list-item { border-top: 1px solid var(--bs-border-color); }
.help-list-item:hover { background: rgba(var(--bs-primary-rgb), .05); color: var(--bs-body-color); }
.help-list-item > span { flex: 1; min-width: 0; }
.help-list-item > .bx { color: var(--bs-secondary-color); font-size: 1.25rem; }
.help-list-title { display: block; color: var(--bs-heading-color); font-weight: 500; }
.help-list-meta { display: block; font-size: .8rem; color: var(--bs-primary); }
.help-list-text { display: block; font-size: .875rem; color: var(--bs-secondary-color); }
.help-results-title { font-size: 1.5rem; margin-bottom: 1.25rem; }

/* An article and "On this page" */
.help-article-layout { display: grid; grid-template-columns: minmax(0, 1fr) 15rem; gap: 3rem; align-items: start; }
.help-article { max-width: 46rem; }
.help-article h1 { font-size: 2rem; font-weight: 600; margin-bottom: .5rem; }
.help-summary { font-size: 1.1rem; color: var(--bs-secondary-color); margin-bottom: .75rem; }
.help-updated { font-size: .85rem; color: var(--bs-secondary-color); padding-bottom: 1.25rem; margin-bottom: 1.5rem; border-bottom: 1px solid var(--bs-border-color); }
.help-body { font-size: 1rem; line-height: 1.75; color: var(--bs-body-color); }
.help-body h2 { font-size: 1.35rem; font-weight: 600; margin: 2.25rem 0 .75rem; scroll-margin-top: 1.5rem; }
.help-body h3 { font-size: 1.1rem; font-weight: 600; margin: 1.75rem 0 .5rem; scroll-margin-top: 1.5rem; }
.help-body p, .help-body ul, .help-body ol { margin-bottom: 1rem; }
.help-body li { margin-bottom: .35rem; }
.help-body code { padding: .1rem .35rem; border-radius: .3rem; background: rgba(var(--bs-primary-rgb), .1); color: var(--bs-primary); font-size: .875em; }
.help-body strong { color: var(--bs-heading-color); font-weight: 600; }
.help-body pre { margin: 1rem 0 1.25rem; padding: 1rem 1.15rem; border-radius: .75rem; background: #22303e; color: #e4e6e8; font-size: .85rem; line-height: 1.6; overflow-x: auto; }
.help-body pre code { padding: 0; background: none; color: inherit; font-size: inherit; }
.help-body blockquote { margin: 1rem 0 1.25rem; padding: .25rem 0 .25rem 1rem; border-left: 3px solid rgba(var(--bs-primary-rgb), .45); color: var(--bs-heading-color); font-style: italic; }
.help-body blockquote > :last-child { margin-bottom: 0; }
.help-body table { width: 100%; margin-bottom: 1.25rem; border-collapse: collapse; font-size: .925rem; }
.help-body th, .help-body td { padding: .55rem .75rem; border: 1px solid var(--bs-border-color); vertical-align: top; }
.help-body th { background: rgba(var(--bs-primary-rgb), .06); color: var(--bs-heading-color); font-weight: 600; }

/* Screenshots: framed in the brand's gradient, as Gleap frames theirs */
.help-body img {
  display: block; max-width: 100%; height: auto; margin: 1.5rem 0; padding: .6rem; border-radius: 1rem; cursor: zoom-in;
  background: linear-gradient(135deg, #696cff 0%, #a78bff 55%, #ffb38a 100%); box-shadow: 0 .75rem 2rem rgba(34, 48, 62, .14);
}
.help-zoom { max-width: 96vw; max-height: 96vh; padding: 0; border: 0; outline: 0; background: transparent; cursor: zoom-out; }
.help-zoom::backdrop { background: rgba(20, 21, 40, .78); }
.help-zoom img { display: block; max-width: 96vw; max-height: 94vh; border-radius: .75rem; }

/* Callouts: GitHub's alerts (> [!TIP]) as Markdig renders them */
.markdown-alert { margin: 1.25rem 0; padding: .9rem 1.15rem; border-radius: .75rem; border: 1px solid; }
.markdown-alert > :last-child { margin-bottom: 0; }
.markdown-alert-title { display: flex; align-items: center; gap: .5rem; margin-bottom: .35rem !important; font-weight: 600; }
.markdown-alert-title svg { fill: currentColor; }
.markdown-alert-note { background: rgba(var(--bs-primary-rgb), .07); border-color: rgba(var(--bs-primary-rgb), .25); }
.markdown-alert-note .markdown-alert-title { color: var(--bs-primary); }
.markdown-alert-tip { background: rgba(3, 195, 236, .08); border-color: rgba(3, 195, 236, .3); }
.markdown-alert-tip .markdown-alert-title { color: #03a8cc; }
.markdown-alert-important, .markdown-alert-warning, .markdown-alert-caution { background: rgba(255, 171, 0, .09); border-color: rgba(255, 171, 0, .35); }
.markdown-alert-important .markdown-alert-title, .markdown-alert-warning .markdown-alert-title, .markdown-alert-caution .markdown-alert-title { color: #d48f00; }

.help-toc { position: sticky; top: 1.5rem; padding-left: 1rem; border-left: 2px solid var(--bs-border-color); font-size: .875rem; }
.help-toc-title { color: var(--bs-heading-color); font-weight: 600; margin-bottom: .5rem; }
.help-toc-link { display: block; padding: .25rem 0; color: var(--bs-secondary-color); line-height: 1.35; }
.help-toc-link:hover { color: var(--bs-primary); }
.help-toc-3 { padding-left: .85rem; font-size: .825rem; }
.help-more { margin-top: 3rem; }
.help-more h2 { font-size: 1.15rem; font-weight: 600; margin-bottom: 1rem; }

.help-footer { display: flex; flex-wrap: wrap; gap: 1.25rem; justify-content: center; padding-top: 1.5rem; padding-bottom: 2rem; font-size: .85rem; color: var(--bs-secondary-color); }
.help-footer a { color: var(--bs-secondary-color); }
.help-footer a:hover { color: var(--bs-primary); }

@media (max-width: 991.98px) {
  .help-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .help-article-layout { grid-template-columns: minmax(0, 1fr); }
  .help-toc { display: none; }
}
@media (max-width: 575.98px) {
  .help-container { padding: 0 1rem; }
  .help-grid { grid-template-columns: minmax(0, 1fr); }
  .help-title { font-size: 1.6rem; }
  .help-article h1 { font-size: 1.6rem; }
  .help-top { gap: .75rem; }
  .help-collection-head { flex-direction: column; gap: .75rem; }
  .help-brand .brand-logo { height: 24px; }
  .help-brand .brand-word { font-size: 1.15rem; }
  .help-app-link { font-size: .875rem; }
}