/* The help centre split by product (site-src/dm/PLAN.md § 3 G, 2026-10-07; Anant: "these are the comment moderation help
   articles, and these are the DM automation help articles"). Linked after system.css by site-src/gen/help-pages.py on
   every help page. Only the grouping lives here; the docs shell itself is the HELP CENTRE block of system.css.
   Prefix hcp-. Tokens only. */

/* the home: three groups of topic tiles, each under its product's name, glyph and one line */
/* (agent HP, 2026-10-08) the visitor's product leads. html[data-product] is set before the first paint (the header's first
   script, ?product= in the head), so the order is CSS here and the page's script only puts the DOM in the same order.
   Moderation chosen, or no script: moderation, DM automation, account. DM chosen: DM automation, account, moderation. */
.hcp-topics > .hc-wrap { display: flex; flex-direction: column; gap: var(--s-12); }
.hcp-group[data-g='mod'] { order: 1; } .hcp-group[data-g='dm'] { order: 2; } .hcp-group[data-g='acct'] { order: 3; }
html[data-product='dm'] .hcp-group[data-g='dm'] { order: 1; } html[data-product='dm'] .hcp-group[data-g='acct'] { order: 2; } html[data-product='dm'] .hcp-group[data-g='mod'] { order: 3; }
.hcp-group-h { margin-bottom: var(--s-4); }
.hcp-group-h .hc-h2 { display: flex; align-items: center; gap: var(--s-2); margin: 0 0 var(--s-1); }
.hcp-gi { width: 16px; height: 16px; color: var(--ink-3); }
.hcp-group-h p { margin: 0; max-width: 68ch; font-size: var(--hc-small); line-height: 1.5; color: var(--ink-3c); }
.hcp-group { scroll-margin-top: var(--hc-top); }   /* the crumb's /help#dm-automation lands below the sticky header */

/* the rail: the same three groups, each product's name a quiet label over its topics (the topics stay the links) */
.hcp-nav li.hcp-gh { margin: var(--s-5) 0 var(--s-1); padding-inline: 10px; }
html:not([data-product='dm']) .hcp-nav li.hcp-gh[data-g='mod'], html[data-product='dm'] .hcp-nav li.hcp-gh[data-g='dm'] { margin-top: 0; }
.hcp-nav li.hcp-gh .hc-label { display: block; margin: 0; }
:lang(ar) .hcp-nav .hc-label, :lang(ar) .hcp-group-h .hc-h2 { letter-spacing: 0; }

/* below 960px the tree is one strip of chips: the labels ride in it as dividers, so the strip stays one line */
@media (max-width: 960px) {
  .hcp-nav li.hcp-gh { display: flex; align-items: center; margin: 0; padding-inline: var(--s-3) var(--s-1); scroll-snap-align: none; }
  html:not([data-product='dm']) .hcp-nav li.hcp-gh[data-g='mod'], html[data-product='dm'] .hcp-nav li.hcp-gh[data-g='dm'] { padding-inline-start: 0; }
  .hcp-topics > .hc-wrap { gap: var(--s-8); }
}
@media (max-width: 480px) {
  .hcp-group-h { margin-bottom: var(--s-2); }
}

/* a guide of a shared topic that names its own product (Get started with DM automation): a hairline row over that
   product's tiles on the home, and one line under the Start here order */
.hcp-first { list-style: none; margin: 0 0 var(--s-4); padding: 0; border-block: var(--hairline) solid var(--line); }
.hcp-first li { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); padding: var(--s-3) 0; }
.hcp-first li + li { border-top: var(--hairline) solid var(--line); }
.hcp-first a { display: inline-flex; align-items: center; gap: var(--s-2); font-size: 15px; font-weight: 600; color: var(--ink); text-decoration: none; }
.hcp-first a:hover { color: var(--accent-ink); }
.hcp-first small { flex: none; font-size: var(--hc-small); color: var(--ink-3c); font-variant-numeric: tabular-nums; }
.hcp-also { margin: var(--s-5) 0 0; }

/* H0 (2026-10-07): on a coarse pointer the group's first-guide link and the Start here steps answer a 44px finger through an
   invisible ::after */
@media (pointer: coarse) { .hcp-first a, .hc-seq a { position: relative; } .hcp-first a::after, .hc-seq a::after { content: ''; position: absolute; left: 50%; top: 50%; width: max(100%, 44px); height: max(100%, 44px); transform: translate(-50%, -50%); } }

/* ── the product switch and the product-aware tree and search (agent HP, 2026-10-08; site-src/dm/status/HP-help-product.md) ── */

/* the quick switch under the search: the header's two product tabs as one radio group in the page, and a jump to what both
   products share. It shows only where a script set the product (without script the fixed order renders and there is nothing
   to switch). The chosen side is a raised tile, a heavier weight and a tick, never the colour alone; both sides are equal
   columns, so choosing moves nothing. */
.hcp-switch { display: none; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--s-3) var(--s-5); margin-top: var(--s-5); }
html[data-product] .hcp-switch { display: flex; }
.hcp-seg { display: inline-grid; grid-template-columns: 1fr 1fr; gap: 2px; padding: 3px; border: var(--hairline) solid var(--line); border-radius: var(--r-md); background: var(--canvas); }
.hcp-seg button { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); min-height: 36px; padding: var(--s-1) var(--s-3); border: var(--hairline) solid transparent; border-radius: var(--r-sm); background: transparent; font: inherit; font-size: var(--t-small); font-weight: 500; line-height: 1.25; color: var(--ink-3c); cursor: pointer; transition: background var(--t-micro) var(--ease), color var(--t-micro) var(--ease), border-color var(--t-micro) var(--ease); }
.hcp-seg button:hover { color: var(--ink); }
.hcp-seg button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.hcp-seg .i { flex: none; width: 15px; height: 15px; }
.hcp-seg .hcp-si { color: var(--ink-4); }
.hcp-seg .hcp-sc { visibility: hidden; color: var(--accent); }
html:not([data-product='dm']) .hcp-seg [data-p='mod'], html[data-product='dm'] .hcp-seg [data-p='dm'] { border-color: var(--line); background: var(--surface); color: var(--ink); font-weight: 600; box-shadow: var(--shadow-lift); }
html:not([data-product='dm']) .hcp-seg [data-p='mod'] .hcp-si, html[data-product='dm'] .hcp-seg [data-p='dm'] .hcp-si { color: var(--accent); }
html:not([data-product='dm']) .hcp-seg [data-p='mod'] .hcp-sc, html[data-product='dm'] .hcp-seg [data-p='dm'] .hcp-sc { visibility: visible; }
.hcp-jump { display: inline-flex; align-items: center; gap: var(--s-1); font-size: var(--t-small); font-weight: 500; color: var(--ink-3c); text-decoration: none; }
.hcp-jump:hover { color: var(--ink); }
.hcp-jump .i { color: var(--ink-4); }
@media (max-width: 480px) {
  .hcp-switch { margin-top: var(--s-4); }
  .hcp-seg { display: grid; width: 100%; }
  .hcp-seg button { min-height: 44px; padding-inline: var(--s-2); gap: var(--s-1); font-size: var(--hc-small); }
  .hcp-seg .hcp-si { display: none; }
  .hcp-seg .hcp-sc { display: none; }
  html:not([data-product='dm']) .hcp-seg [data-p='mod'] .hcp-sc, html[data-product='dm'] .hcp-seg [data-p='dm'] .hcp-sc { display: block; }
}
@media (prefers-reduced-motion: reduce) { .hcp-seg button { transition: none; } }

/* the tree leads with the page's product: its own on a product's topic or guide, the visitor's on a page both share. The rows
   are one flat list (below 960px one strip of chips), so the groups are ordered by `order`; the page's script moves the DOM too */
.hcp-nav li[data-g='mod'] { order: 1; } .hcp-nav li[data-g='acct'] { order: 2; } .hcp-nav li[data-g='dm'] { order: 3; }
html[data-product='dm'] .hcp-nav li[data-g='dm'] { order: 1; } html[data-product='dm'] .hcp-nav li[data-g='mod'] { order: 3; }
/* a topic both products use is listed under each: only the leading product's row shows, so the tree never holds it twice */
html:not([data-product='dm']) .hcp-nav li[data-g='dm'][data-x], html[data-product='dm'] .hcp-nav li[data-g='mod'][data-x] { display: none; }
/* the other product's topics fold under its name (the script makes the name a button and sets data-fold; without it they stay open) */
html:not([data-product='dm']) .hcp-nav[data-fold='1'] li[data-g='dm']:not(.hcp-gh), html[data-product='dm'] .hcp-nav[data-fold='1'] li[data-g='mod']:not(.hcp-gh) { display: none; }
.hcp-fold { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); width: calc(100% + 20px); margin: -6px -10px; padding: 6px 10px; border: 0; border-radius: var(--r-sm); background: none; font-family: inherit; text-align: start; cursor: pointer; transition: background var(--t-micro) var(--ease), color var(--t-micro) var(--ease); }
.hcp-nav li.hcp-gh .hcp-fold { display: flex; margin: -6px -10px; }
.hcp-fold:hover { background: var(--canvas); color: var(--ink); }
.hcp-fold:focus-visible { outline: 2px solid var(--accent); outline-offset: 0; }
.hcp-fold .i { flex: none; width: 14px; height: 14px; color: var(--ink-4); transition: transform var(--t-micro) var(--ease); }
.hcp-fold[aria-expanded='true'] .i { transform: rotate(90deg); }
:lang(ar) .hcp-fold .i { transform: rotate(180deg); } :lang(ar) .hcp-fold[aria-expanded='true'] .i { transform: rotate(90deg); }
@media (max-width: 960px) {
  .hcp-nav li.hcp-gh .hcp-fold { width: auto; margin: 0; padding: 7px var(--s-3); border: var(--hairline) dashed var(--line); border-radius: var(--r-pill); white-space: nowrap; }
}
@media (prefers-reduced-motion: reduce) { .hcp-fold, .hcp-fold .i { transition: none; } }

/* a search result names its product in words before its topic: title, then "DM automation · Flow starts", then the line */
.hc-results a { grid-template-columns: minmax(0, 1fr); }
.hc-results a span { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1) var(--s-2); white-space: normal; }
.hc-results a .hcp-rp { font-style: normal; font-weight: 600; color: var(--ink-2); }
.hc-results a .hcp-rp::after { content: '·'; margin-inline-start: var(--s-2); font-weight: 400; color: var(--ink-4); }

/* Start here by product (agent HP, 2026-10-08): the visitor's path in full and numbered, the other product's as one line under it */
.hcp-paths { display: flex; flex-direction: column; }
.hcp-path[data-g='dm'] { order: 1; } html[data-product='dm'] .hcp-path[data-g='dm'] { order: -1; }
html:not([data-product='dm']) .hcp-path[data-g='dm'] .hcp-path-full, html[data-product='dm'] .hcp-path[data-g='mod'] .hcp-path-full { display: none; }
html:not([data-product='dm']) .hcp-path[data-g='mod'] .hcp-path-line, html[data-product='dm'] .hcp-path[data-g='dm'] .hcp-path-line { display: none; }
.hc-seq li a .hcp-next { flex: none; font-weight: 400; color: var(--ink-3c); }