/* Help center (#help): hero with search, topic cards, guided tours, article pages. Drawn by tours.js from help.js. */
body[data-page="help"] .board-header { display: none; }
body[data-page="help"] #view { padding: var(--space-24) var(--space-40) var(--space-80); }
.help-page { max-width: 1080px; margin: 0 auto; color: var(--primary-text-color); }
.help-loading { margin: var(--space-40) 0; text-align: center; font: var(--font-text1-normal); color: var(--secondary-text-color); }
.help-center a { color: inherit; }
.help-center [tabindex="-1"]:focus { outline: none; box-shadow: none; }

/* Hero */
.help-hero { position: relative; padding: var(--space-48) var(--space-24) var(--space-40); border-radius: var(--border-radius-big); text-align: center;
  background: linear-gradient(135deg, var(--primary-highlighted-color) 0%, #e6f0ff 55%, #eef8f3 100%); }
.help-hero-top { position: absolute; top: var(--space-16); right: var(--space-16); }
.help-title { margin: 0; font: var(--font-h1-medium); color: var(--primary-text-color); outline: none; }
.help-sub { margin: var(--space-8) 0 var(--space-24); font: var(--font-text1-normal); color: var(--secondary-text-color); }
.help-search { display: flex; align-items: center; gap: var(--space-8); max-width: 640px; height: 40px; margin: 0 auto; padding: 0 var(--space-16);
  border: 1px solid var(--ui-border-color); border-radius: var(--border-radius-medium); background: var(--primary-background-color); color: var(--icon-color); text-align: left; }
.help-search.big { height: 56px; border-radius: 28px; padding: 0 var(--space-24); box-shadow: var(--box-shadow-small); border-color: transparent; }
.help-search:focus-within { border-color: var(--primary-color); box-shadow: 0 0 0 1px var(--primary-color); }
.help-search.big:focus-within { box-shadow: var(--box-shadow-small), 0 0 0 2px var(--primary-color); }
.help-search input { flex: 1; min-width: 0; height: 100%; border: 0; outline: none; background: transparent; color: var(--primary-text-color); font: var(--font-text1-normal); }
.help-search.big input { font: 400 17px/23px var(--font-family); }
.help-search input::placeholder { color: var(--placeholder-color); }
.help-hero-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-8); margin-top: var(--space-24); }
.help-hero-actions .button { text-decoration: none; }

/* Sections, topic cards and tours */
.help-section { margin-top: var(--space-40); }
.help-section-title { margin: 0 0 var(--space-16); font: var(--font-h2-medium); }
.help-section-title a { text-decoration: none; }
.help-section-title a:hover { color: var(--primary-color); }
.help-section-sub { margin: calc(-1 * var(--space-8)) 0 var(--space-16); color: var(--secondary-text-color); }
.help-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--space-16); }
.help-card { display: flex; flex-direction: column; gap: var(--space-8); padding: var(--space-20); border: 1px solid var(--layout-border-color); border-radius: var(--border-radius-medium);
  background: var(--primary-background-color); text-decoration: none; transition: box-shadow var(--motion-productive-long), border-color var(--motion-productive-long); }
.help-card:hover, .help-card:focus-visible { border-color: var(--primary-color); box-shadow: var(--box-shadow-medium); text-decoration: none; }
.help-card-icon { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 44px; height: 44px; border-radius: var(--border-radius-medium);
  background: var(--primary-selected-color); color: var(--primary-color); }
.help-card-title { font: var(--font-text1-bold); }
.help-card-intro { flex: 1; font: var(--font-text2-normal); color: var(--secondary-text-color); }
.help-card-count { font: var(--font-text3-normal); color: var(--secondary-text-color); }
.help-tours { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: var(--space-12); }
.help-tour { display: flex; align-items: center; gap: var(--space-12); width: 100%; padding: var(--space-16); border: 1px solid var(--layout-border-color); border-radius: var(--border-radius-medium);
  background: var(--primary-background-color); color: var(--primary-text-color); text-align: left; cursor: pointer; font: inherit; }
.help-tour:hover, .help-tour:focus-visible { border-color: var(--primary-color); box-shadow: var(--box-shadow-small); }
.help-tour-icon { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--primary-color); color: #fff; }
.help-tour-text { display: flex; flex: 1; flex-direction: column; gap: 2px; min-width: 0; }
.help-tour-title { font: var(--font-text2-bold); }
.help-tour-summary { font: var(--font-text3-normal); color: var(--secondary-text-color); }
.help-tour-meta { font: var(--font-text3-normal); color: var(--secondary-text-color); }
.help-tour-go { flex: none; color: var(--primary-color); font: var(--font-text2-medium); }

/* Article lists */
.help-list { margin: 0; padding: 0; list-style: none; border: 1px solid var(--layout-border-color); border-radius: var(--border-radius-medium); background: var(--primary-background-color); overflow: hidden; }
.help-list > li + li { border-top: 1px solid var(--layout-border-color); }
.help-row { display: flex; align-items: center; gap: var(--space-16); padding: var(--space-16) var(--space-20); text-decoration: none; color: var(--primary-text-color); }
.help-row:hover, .help-row:focus-visible { background: var(--primary-background-hover-color); text-decoration: none; }
.help-row > svg.icon { flex: none; color: var(--icon-color); }
.help-row-text { display: flex; flex: 1; flex-direction: column; gap: 2px; min-width: 0; }
.help-row-title { font: var(--font-text1-medium); }
.help-row-summary { font: var(--font-text2-normal); color: var(--secondary-text-color); }
.help-row-cat { flex: none; padding: 2px var(--space-8); border-radius: 12px; background: var(--ui-background-color); font: var(--font-text3-normal); color: var(--secondary-text-color); white-space: nowrap; }
.help-list.compact .help-row { padding: var(--space-12) var(--space-16); }
.help-list.compact .help-row-title { font: var(--font-text2-medium); }
.help-empty { display: flex; flex-direction: column; align-items: center; gap: var(--space-8); padding: var(--space-48) var(--space-16); text-align: center; color: var(--secondary-text-color); }
.help-empty > svg.icon { color: var(--icon-color); }
.help-empty h1, .help-empty h2 { margin: var(--space-8) 0 0; font: var(--font-h3-medium); color: var(--primary-text-color); }
.help-empty p { margin: 0 0 var(--space-8); }

/* Category, all articles and article pages */
.help-topbar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-16); margin-bottom: var(--space-16); }
.help-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); min-width: 0; font: var(--font-text2-normal); color: var(--secondary-text-color); }
.help-crumbs a { color: var(--link-color); text-decoration: none; }
.help-crumbs a:hover { text-decoration: underline; }
.help-crumbs svg.icon { color: var(--icon-color); flex: none; }
.help-crumbs [aria-current] { color: var(--primary-text-color); }
.help-sub-page > .help-search { max-width: none; margin: 0 0 var(--space-32); }
.help-page-head { display: flex; align-items: flex-start; gap: var(--space-16); margin-bottom: var(--space-24); }
.help-page-title { margin: 0 0 var(--space-8); font: var(--font-h1-medium); outline: none; }
.help-page-intro { margin: 0; font: var(--font-text1-normal); color: var(--secondary-text-color); }
.help-article-layout { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: var(--space-48); align-items: start; }
.help-aside { position: sticky; top: var(--space-16); }
.help-aside h2 { margin: 0 0 var(--space-8); font: var(--font-text2-bold); }
.help-aside ul { margin: 0; padding: 0; list-style: none; border-left: 1px solid var(--layout-border-color); }
.help-aside a { display: block; margin-left: -1px; padding: 6px var(--space-12); border-left: 2px solid transparent; font: var(--font-text2-normal); color: var(--secondary-text-color); text-decoration: none; }
.help-aside a:hover { color: var(--primary-text-color); }
.help-aside a.current { border-left-color: var(--primary-color); color: var(--primary-color); font-weight: 600; }
.help-article { max-width: 760px; }
.help-summary { margin: 0 0 var(--space-24); font: 400 17px/25px var(--font-family); color: var(--secondary-text-color); }
.help-gating { margin-bottom: var(--space-24); }
.help-showme { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-12); margin-bottom: var(--space-24); padding: var(--space-16); border-radius: var(--border-radius-medium); background: var(--primary-highlighted-color); }
.help-showme > span { font: var(--font-text2-normal); color: var(--secondary-text-color); }
.help-h2 { margin: var(--space-32) 0 var(--space-16); font: var(--font-h3-bold); }
.help-steps { margin: 0; padding: 0; list-style: none; counter-reset: none; }
.help-steps > li { display: flex; gap: var(--space-16); align-items: flex-start; padding: var(--space-12) 0; }
.help-steps > li + li { border-top: 1px dashed var(--layout-border-color); }
.help-step-num { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 28px; height: 28px; border-radius: 50%;
  background: var(--primary-color); color: #fff; font: var(--font-text2-bold); }
.help-step-text { padding-top: 3px; font: 400 15px/22px var(--font-family); }
.help-step-text strong { font-weight: 700; }
.help-tips { margin-top: var(--space-24); }
.help-tips ul.attention-body { margin: 0; padding-left: 20px; line-height: 22px; }
.help-tips li + li { margin-top: var(--space-4); }
.help-related { margin-top: var(--space-8); }
.help-pager { display: flex; justify-content: space-between; gap: var(--space-16); margin-top: var(--space-40); }
.help-pager-link { display: flex; align-items: center; gap: var(--space-8); max-width: 48%; padding: var(--space-12) var(--space-16); border: 1px solid var(--layout-border-color);
  border-radius: var(--border-radius-medium); text-decoration: none; color: var(--primary-text-color); }
.help-pager-link:hover { border-color: var(--primary-color); text-decoration: none; }
.help-pager-link span { display: flex; flex-direction: column; min-width: 0; }
.help-pager-link small { font: var(--font-text3-normal); color: var(--secondary-text-color); }
.help-pager-link strong { font: var(--font-text2-medium); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.help-pager-link.next { margin-left: auto; text-align: right; }

@media (max-width: 1100px) {
  .help-article-layout { grid-template-columns: minmax(0, 1fr); }
  .help-aside { display: none; }
}
@media (max-width: 760px) {
  body[data-page="help"] #view { padding: var(--space-16) var(--space-16) var(--space-32); }
  .help-hero { padding: var(--space-48) var(--space-16) var(--space-24); }
  .help-title { font: var(--font-h2-medium); }
  .help-sub { font: var(--font-text2-normal); margin-bottom: var(--space-16); }
  .help-search.big { height: 48px; padding: 0 var(--space-16); }
  .help-search.big input { font: var(--font-text1-normal); }
  .help-section { margin-top: var(--space-32); }
  .help-section-title { font: var(--font-h3-bold); }
  .help-grid, .help-tours { grid-template-columns: minmax(0, 1fr); }
  .help-row { padding: var(--space-12) var(--space-16); gap: var(--space-8); }
  .help-row-cat { display: none; }
  .help-page-title { font: var(--font-h2-medium); }
  .help-summary { font: var(--font-text1-normal); }
  .help-topbar { align-items: flex-start; }
  .help-pager { flex-direction: column; }
  .help-pager-link { max-width: none; }
  .help-pager-link.next { margin-left: 0; }
  .help-tour-go { display: none; }
}