/* The Help Centre: /help, /help/topic/<topic>, /help/search and /help/<slug>. A reading surface in the visitor's own theme (Temple Dark or
   Temple Dawn). Colours, sizes, spacing, radii and motion come from the design tokens (--ds-*); the seven centre colours come from
   chakra.css (--ck-*) and appear only as the petal marks. The marks are decoration (aria-hidden) and say nothing about a topic.
   One quiet thing moves: the halo of petals behind the heading turns once in seven minutes, and only where motion is welcome. */

.hlp { --hlp-ck-mix: 70%; }
:root.dark .hlp, :root[data-theme="dark"] .hlp { --hlp-ck-mix: 100%; }

.hlp-page { box-sizing: border-box; inline-size: 100%; max-inline-size: var(--ds-width-marketing); margin-inline: auto; min-inline-size: 0; overflow-x: clip;
  padding: var(--ds-space-9) var(--ds-gutter, var(--ds-space-4)) var(--ds-space-11); font-family: var(--ds-font-ui); color: var(--ds-text); overflow-wrap: break-word; }
.hlp-page *, .hlp-page *::before, .hlp-page *::after { box-sizing: border-box; }

/* ---------------------------------------------------------------- the petal marks */
.hlp-petal { flex: none; inline-size: 2.5rem; block-size: 2.5rem; color: color-mix(in srgb, var(--ck, var(--ds-accent)) var(--hlp-ck-mix), var(--ds-text)); }
.hlp-halo { position: absolute; z-index: -1; inset-block-start: calc(var(--ds-space-8) * -1); inset-inline-end: calc(min(70vw, 26rem) / -3); inline-size: min(70vw, 26rem); block-size: min(70vw, 26rem);
  color: color-mix(in srgb, var(--ck-throat) var(--hlp-ck-mix), var(--ds-text)); opacity: .16; --hlp-sw: 1.1; pointer-events: none; }
:root:not(.dark):not([data-theme="dark"]) .hlp-halo { opacity: .22; }
@media (prefers-reduced-motion: no-preference) {
  .hlp-halo { animation: hlp-turn 420s linear infinite; }
  @keyframes hlp-turn { to { transform: rotate(1turn); } }
}

/* ---------------------------------------------------------------- the head: title, search */
.hlp-head { position: relative; isolation: isolate; display: grid; gap: var(--ds-space-3); max-inline-size: 70ch; margin-block-end: var(--ds-space-8); }
.hlp-crumb { margin: 0; font-size: var(--ds-text-sm); color: var(--ds-text-muted); }
.hlp-crumb a { display: inline-flex; align-items: center; justify-content: center; min-block-size: 44px; min-inline-size: 44px; color: var(--ds-text-muted); text-underline-offset: .2em; }
.hlp-crumb a:hover { color: var(--ds-accent); }
.hlp-title { margin: 0; font-family: var(--ds-font-display); font-weight: 500; font-size: var(--ds-text-4xl); line-height: var(--ds-leading-tight); letter-spacing: -.01em; text-wrap: balance; }
.hlp-title--topic, .hlp-title--article { display: flex; align-items: flex-start; gap: var(--ds-space-3); font-size: var(--ds-text-3xl); }
.hlp-title--topic .hlp-petal, .hlp-title--article .hlp-petal { margin-block-start: .15em; inline-size: 2.25rem; block-size: 2.25rem; }
.hlp-lede, .hlp-for { margin: 0; font-size: var(--ds-text-lg); line-height: var(--ds-leading-normal); color: var(--ds-text-muted); max-inline-size: 60ch; }
.hlp-for { font-size: var(--ds-text-md); }
.hlp-for strong { font-weight: 600; color: var(--ds-text); }
.hlp-off { margin: var(--ds-space-2) 0 0; padding: var(--ds-space-3) var(--ds-space-4); background: var(--ds-surface-sunken); border-inline-start: 3px solid var(--ds-accent); border-radius: var(--ds-radius-sm); line-height: var(--ds-leading-normal); font-size: var(--ds-text-sm); }

.hlp-search { display: grid; gap: var(--ds-space-2); margin-block-start: var(--ds-space-4); }
.hlp-search__label { font-size: var(--ds-text-sm); color: var(--ds-text-muted); }
.hlp-search__row { display: flex; gap: var(--ds-space-2); }
.hlp-search__input { flex: 1 1 auto; min-inline-size: 0; min-block-size: 52px; padding: 0 var(--ds-space-4); background: var(--ds-surface-raised); color: var(--ds-text); border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-md); font: inherit; font-size: var(--ds-text-lg); }
.hlp-search__input::placeholder { color: var(--ds-text-muted); opacity: 1; }
.hlp-search__input:focus-visible { outline: 2px solid var(--ds-focus); outline-offset: 2px; border-color: var(--ds-accent); }
.hlp-search__go { flex: none; min-block-size: 52px; padding-inline: var(--ds-space-5); }
.hlp-live__status { margin: 0; min-block-size: 1.25rem; font-size: var(--ds-text-sm); color: var(--ds-text-muted); }
.hlp-live { max-inline-size: 70ch; padding: var(--ds-space-2) var(--ds-space-4); background: var(--ds-surface-raised); border: 1px solid var(--ds-border); border-radius: var(--ds-radius-md); }
.hlp-live[hidden] { display: none; }
.hlp-live__list { list-style: none; margin: 0; padding: 0; }
.hlp-live__list li + li { border-block-start: 1px solid var(--ds-border); }
.hlp-live__link { display: grid; gap: var(--ds-space-1); min-block-size: 44px; padding-block: var(--ds-space-3); color: inherit; text-decoration: none; }
.hlp-live__title { font-weight: 600; color: var(--ds-accent); }
.hlp-live__link:hover .hlp-live__title { text-decoration: underline; text-underline-offset: .2em; }
.hlp-live__sum, .hlp-live__meta { font-size: var(--ds-text-sm); line-height: var(--ds-leading-normal); color: var(--ds-text-muted); }
.hlp-live__meta { font-size: var(--ds-text-xs); }

/* ---------------------------------------------------------------- landing: the topics are the contents; "for you" sits beside them on wide screens */
.hlp-page--landing { display: grid; gap: var(--ds-space-8); align-content: start; grid-template-columns: minmax(0, 1fr); }
.hlp-page--landing > .hlp-head { margin-block-end: 0; }
.hlp-side { display: grid; gap: var(--ds-space-6); align-content: start; min-inline-size: 0; }
.hlp-access, .hlp-start, .hlp-recent { min-inline-size: 0; }
.hlp-access { padding: var(--ds-space-4) var(--ds-space-5); background: var(--ds-surface-raised); border: 1px solid var(--ds-border); border-radius: var(--ds-radius-md); }
.hlp-access h2, .hlp-start h2, .hlp-recent h2, .hlp-see h2, .hlp-results__h { margin: 0 0 var(--ds-space-2); font-family: var(--ds-font-display); font-weight: 500; font-size: var(--ds-text-xl); line-height: var(--ds-leading-tight); }
.hlp-access p { margin: 0; line-height: var(--ds-leading-normal); }
.hlp-topics { display: grid; gap: var(--ds-space-7); align-content: start; min-inline-size: 0; }
.hlp-topics[hidden] { display: none; }
.hlp-topic { display: grid; gap: var(--ds-space-2); border-block-start: 1px solid var(--ds-border); padding-block-start: var(--ds-space-5); min-inline-size: 0; }
.hlp-topic__id { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--ds-space-3); align-items: start; }
.hlp-topic__id .hlp-petal { grid-row: 1 / span 2; margin-block-start: .1rem; }
.hlp-topic h2 { margin: 0; font-family: var(--ds-font-display); font-weight: 500; font-size: var(--ds-text-2xl); line-height: var(--ds-leading-tight); text-wrap: balance; }
.hlp-topic h2 a { display: inline-flex; align-items: center; min-block-size: 44px; color: var(--ds-text); text-decoration: none; }
.hlp-topic h2 a:hover { color: var(--ds-accent); text-decoration: underline; text-underline-offset: .2em; }
.hlp-topic__sum { margin: 0; color: var(--ds-text-muted); line-height: var(--ds-leading-normal); max-inline-size: 60ch; }
.hlp-topic--single { border-block-start: 0; padding-block-start: 0; max-inline-size: 70ch; }
.hlp-empty { margin: 0 0 var(--ds-space-4); color: var(--ds-text-muted); line-height: var(--ds-leading-normal); max-inline-size: 60ch; }
@media (min-width: 64rem) {
  .hlp-page--landing { grid-template-columns: minmax(0, 1fr) 19rem; column-gap: var(--ds-space-10); row-gap: var(--ds-space-6); }
  .hlp-page--landing > .hlp-head { grid-column: 1 / -1; }
  .hlp-page--landing .hlp-topics { grid-column: 1; grid-row: 2; }
  .hlp-page--landing .hlp-side { grid-column: 2; grid-row: 2; position: sticky; inset-block-start: calc(var(--ds-header-h, 64px) + var(--ds-space-5)); }
}

/* a list of guides: the whole row is the link, at least 44px tall; two columns where the room allows */
.hlp-guides { list-style: none; margin: 0; padding: 0; display: grid; }
.hlp-guides li { min-inline-size: 0; }
.hlp-guides li + li { border-block-start: 1px solid var(--ds-border); }
.hlp-guide { display: grid; gap: var(--ds-space-1); justify-items: start; min-block-size: 44px; padding-block: var(--ds-space-3); color: inherit; text-decoration: none; }
.hlp-guide__title { font-weight: 600; font-size: var(--ds-text-md); color: var(--ds-accent); text-underline-offset: .2em; }
.hlp-guide:hover .hlp-guide__title { text-decoration: underline; }
.hlp-guide__sum { color: var(--ds-text-muted); font-size: var(--ds-text-sm); line-height: var(--ds-leading-normal); font-variant-numeric: lining-nums tabular-nums; }
.hlp-guide__meta { color: var(--ds-text-muted); font-size: var(--ds-text-xs); line-height: var(--ds-leading-normal); }
.hlp-chip { display: inline-flex; align-items: center; padding: 0 var(--ds-space-2); min-block-size: 1.5rem; border: 1px solid var(--ds-border); border-radius: var(--ds-radius-pill); background: var(--ds-surface-sunken);
  font-size: var(--ds-text-xs); color: var(--ds-text); }
.hlp-guides--compact .hlp-guide__sum { font-size: var(--ds-text-xs); }
@media (min-width: 48rem) {
  .hlp-topics .hlp-guides, .hlp-see .hlp-guides { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--ds-space-7); }
  .hlp-topics .hlp-guides li:nth-child(2) { border-block-start: 0; }
  .hlp-topics .hlp-guides li:nth-child(2), .hlp-see .hlp-guides li:nth-child(2) { border-block-start: 1px solid var(--ds-border); }
}
@media (min-width: 64rem) and (max-width: 79.99rem) {
  .hlp-topics .hlp-guides { grid-template-columns: minmax(0, 1fr); }
}

.hlp-results { max-inline-size: 70ch; }
.hlp-guides--results .hlp-guide { gap: var(--ds-space-1); }

/* ---------------------------------------------------------------- an article: one reading column */
.hlp-prose, .hlp-see, .hlp-foot { max-inline-size: 70ch; }
.hlp-prose { font-size: var(--ds-text-md); line-height: 1.7; }
.hlp-prose > :first-child { margin-block-start: 0; }
.hlp-prose p, .hlp-prose ul, .hlp-prose ol, .hlp-prose blockquote, .hlp-prose .hlp-table { margin-block: 0 var(--ds-space-4); }
.hlp-prose h2, .hlp-prose h3, .hlp-prose h4 { font-family: var(--ds-font-display); font-weight: 500; line-height: var(--ds-leading-tight); text-wrap: balance; }
.hlp-prose h2 { margin-block: var(--ds-space-8) var(--ds-space-3); font-size: var(--ds-text-2xl); }
.hlp-prose h3 { margin-block: var(--ds-space-6) var(--ds-space-2); font-size: var(--ds-text-xl); }
.hlp-prose h4 { margin-block: var(--ds-space-5) var(--ds-space-2); font-size: var(--ds-text-lg); }
.hlp-prose ul, .hlp-prose ol { padding-inline-start: 1.5em; }
.hlp-prose li { margin-block: var(--ds-space-2); padding-inline-start: var(--ds-space-1); }
.hlp-prose li > ul, .hlp-prose li > ol { margin-block: var(--ds-space-2) 0; }
.hlp-prose ol > li::marker { color: var(--ds-accent); font-weight: 600; font-variant-numeric: lining-nums tabular-nums; }
.hlp-prose ul > li::marker { color: var(--ds-accent); }
.hlp-prose strong { font-weight: 600; }
.hlp-prose a, .hlp-foot a { color: var(--ds-accent); text-underline-offset: .2em; }
.hlp-prose blockquote { padding: var(--ds-space-3) var(--ds-space-4); background: var(--ds-surface-raised); border-inline-start: 3px solid var(--ds-accent); border-radius: var(--ds-radius-sm); }
.hlp-prose blockquote > :last-child { margin-block-end: 0; }
.hlp-prose code { padding: .1em .4em; background: var(--ds-surface-sunken); border: 1px solid var(--ds-border); border-radius: var(--ds-radius-sm); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .9em; }
.hlp-img { display: block; max-inline-size: 100%; block-size: auto; border: 1px solid var(--ds-border); border-radius: var(--ds-radius-md); }
.hlp-table { overflow-x: auto; border: 1px solid var(--ds-border); border-radius: var(--ds-radius-md); }
.hlp-table table { inline-size: 100%; border-collapse: collapse; font-size: var(--ds-text-sm); line-height: var(--ds-leading-normal); }
.hlp-table th, .hlp-table td { padding: var(--ds-space-3) var(--ds-space-4); text-align: start; vertical-align: top; border-block-end: 1px solid var(--ds-border); min-inline-size: 8rem; }
.hlp-table th { font-weight: 600; background: var(--ds-surface-sunken); }
.hlp-table tr:last-child td { border-block-end: 0; }

.hlp-see { margin-block-start: var(--ds-space-9); padding-block-start: var(--ds-space-5); border-block-start: 1px solid var(--ds-border); }
.hlp-foot { display: grid; gap: var(--ds-space-1); margin-block-start: var(--ds-space-7); color: var(--ds-text-muted); font-size: var(--ds-text-sm); }
.hlp-foot p { margin: 0; line-height: var(--ds-leading-normal); }
.hlp-report { display: inline-flex; align-items: center; min-block-size: 44px; font-weight: 600; }

.hlp a:focus-visible, .hlp [tabindex]:focus-visible { outline: 2px solid var(--ds-focus); outline-offset: 3px; border-radius: var(--ds-radius-sm); }

@media (max-width: 30rem) {
  .hlp-page { padding-block-start: var(--ds-space-7); }
  .hlp-title { font-size: var(--ds-text-3xl); }
  .hlp-search__row { flex-direction: column; }
  .hlp-search__go { inline-size: 100%; }
  .hlp-table th, .hlp-table td { min-inline-size: 6rem; padding-inline: var(--ds-space-3); }
}
@media print { .hlp-halo, .hlp-search, .hlp-live { display: none; } }