/* ── Help Center — scoped styles (#hb-page). Uses the existing design tokens
   (--tw-gray-*, --tw-primary, .card/.btn/.input) so Light/Dark mode follow
   the site theme automatically. No chat visuals anywhere. ── */
#hb-page { --hb-accent: var(--tw-primary); --hb-border: var(--tw-gray-200); }
/* The hidden attribute must always win, even over author display rules
   (e.g. .hb-status { display:flex }). */
#hb-page [hidden] { display: none !important; }
#hb-page .hb-hero { text-align: center; padding: 2.25rem 1rem 1.75rem; }
#hb-page .hb-hero h1 { font-size: 1.9rem; font-weight: 700; color: var(--tw-gray-900); margin: 0 0 .4rem; }
#hb-page .hb-hero p { color: var(--tw-gray-700); font-size: 1rem; margin: 0 0 1.4rem; }
#hb-page .hb-searchwrap { max-width: 720px; margin: 0 auto; position: relative; }
#hb-page .hb-searchrow { display: flex; gap: .6rem; }
#hb-page .hb-input { flex: 1 1 auto; min-width: 0; min-height: 52px; font-size: 1.05rem; padding: 0 1.1rem;
  border: 1px solid var(--hb-border); border-radius: .75rem; background: var(--tw-light, #fff);
  color: var(--tw-gray-900); }
#hb-page .hb-input:focus { outline: 2px solid var(--hb-accent); outline-offset: 1px; }
#hb-page .hb-btn-find { min-height: 52px; padding: 0 1.4rem; font-size: 1rem; font-weight: 600;
  border: none; border-radius: .75rem; background: var(--hb-accent); color: #fff; cursor: pointer; }
#hb-page .hb-btn-find:hover { filter: brightness(1.07); }
#hb-page .hb-note { font-size: .78rem; color: var(--tw-gray-600); margin-top: .55rem; }
#hb-page .hb-suggest { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 30;
  background: var(--tw-light, #fff); border: 1px solid var(--hb-border); border-radius: .75rem;
  box-shadow: 0 14px 40px rgba(15,23,42,.14); text-align: left; overflow: hidden; }
#hb-page .hb-suggest[hidden] { display: none; }
#hb-page .hb-suggest .hb-sg-label { font-size: .7rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: .04em; color: var(--tw-gray-600); padding: .55rem .9rem .25rem; }
#hb-page .hb-suggest button { display: block; width: 100%; text-align: left; background: none; border: 0;
  padding: .55rem .9rem; cursor: pointer; }
#hb-page .hb-suggest button:hover, #hb-page .hb-suggest button:focus-visible { background: var(--tw-gray-100, #f3f4f6); outline: none; }
#hb-page .hb-suggest .t { display: block; font-size: .9rem; font-weight: 600; color: var(--tw-gray-900); }
#hb-page .hb-suggest .c { display: block; font-size: .74rem; color: var(--tw-gray-600); margin-top: .1rem; }
#hb-page .hb-hero-cta { display: flex; gap: .6rem; justify-content: center; flex-wrap: wrap; margin-top: 1.1rem; }

#hb-page .hb-quick { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: .6rem; }
@media (min-width: 640px)  { #hb-page .hb-quick { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (min-width: 1024px) { #hb-page .hb-quick { grid-template-columns: repeat(5, minmax(0,1fr)); } }
#hb-page .hb-quick a { display: flex; flex-direction: column; align-items: flex-start; gap: .45rem;
  border: 1px solid var(--hb-border); border-radius: .75rem; padding: .85rem .9rem; min-height: 44px;
  background: var(--tw-light, #fff); color: var(--tw-gray-800); font-size: .85rem; font-weight: 600;
  text-decoration: none; transition: border-color .15s ease, transform .15s ease; }
#hb-page .hb-quick a:hover { border-color: var(--hb-accent); color: var(--tw-gray-900); transform: translateY(-1px); }
#hb-page .hb-quick i { font-size: 1.15rem; color: var(--hb-accent); }

#hb-page .hb-results { scroll-margin-top: 90px; }
#hb-page .hb-results[hidden] { display: none; }
#hb-page .hb-status { display: flex; align-items: center; gap: .55rem; color: var(--tw-gray-700); font-size: .95rem; min-height: 2rem; }
#hb-page .hb-spinner { width: 18px; height: 18px; border: 2.5px solid var(--hb-border); border-top-color: var(--hb-accent);
  border-radius: 50%; animation: hbspin .8s linear infinite; flex: 0 0 auto; }
@keyframes hbspin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { #hb-page .hb-spinner { animation: none; } }
#hb-page .hb-answer-card { min-height: 120px; }
#hb-page .hb-cat-badge { display: inline-flex; align-items: center; gap: .35rem; border-radius: 999px;
  padding: .2rem .7rem; font-size: .74rem; font-weight: 600; background: color-mix(in srgb, var(--hb-accent) 12%, transparent);
  color: var(--hb-accent); }
#hb-page .hb-answer-text { font-size: 1rem; color: var(--tw-gray-800); line-height: 1.6; white-space: pre-line; margin: .6rem 0 0; }
#hb-page .hb-actions { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: 1rem; }
#hb-page .hb-actions .btn { min-height: 42px; }
#hb-page .hb-login-req { font-size: .68rem; font-weight: 600; border-radius: 999px; padding: .1rem .45rem;
  background: var(--tw-gray-100, #f3f4f6); color: var(--tw-gray-600); margin-left: .35rem; }
#hb-page .hb-needed { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .8rem; }
#hb-page .hb-needed span { border: 1px dashed var(--hb-border); border-radius: 999px; padding: .18rem .6rem;
  font-size: .76rem; color: var(--tw-gray-700); }
#hb-page .hb-fallback-links { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: .9rem; }

#hb-page .hb-related { display: grid; grid-template-columns: repeat(1, minmax(0,1fr)); gap: .7rem; }
@media (min-width: 640px)  { #hb-page .hb-related { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 1024px) { #hb-page .hb-related { grid-template-columns: repeat(4, minmax(0,1fr)); } }
#hb-page .hb-rel-card { display: flex; flex-direction: column; gap: .45rem; border: 1px solid var(--hb-border);
  border-radius: .75rem; padding: .9rem; background: var(--tw-light, #fff); }
#hb-page .hb-rel-card .t { font-size: .9rem; font-weight: 600; color: var(--tw-gray-900); }
#hb-page .hb-rel-card .s { font-size: .8rem; color: var(--tw-gray-700); flex: 1 1 auto; }
#hb-page .hb-rel-card .m { font-size: .72rem; color: var(--tw-gray-600); }
#hb-page .hb-rel-card a.btn { align-self: flex-start; }

#hb-page .hb-summary-box { border: 1px solid var(--hb-border); border-left: 4px solid var(--hb-accent);
  border-radius: .75rem; padding: 1.1rem 1.2rem; margin-top: 1rem; background: var(--tw-light, #fff); }
#hb-page .hb-summary-box h3 { font-size: 1.02rem; font-weight: 700; color: var(--tw-gray-900); margin: 0 0 .7rem; }
#hb-page .hb-summary-box dt { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: var(--tw-gray-600); margin-top: .7rem; }
#hb-page .hb-summary-box dd { margin: .2rem 0 0; font-size: .9rem; color: var(--tw-gray-800); }
#hb-page .hb-summary-box ul { margin: .2rem 0 0 1.1rem; padding: 0; font-size: .9rem; color: var(--tw-gray-800); }

#hb-page .hb-cat-section { scroll-margin-top: 90px; }
#hb-page .hb-cat-section h2 { font-size: 1.15rem; font-weight: 700; color: var(--tw-gray-900); margin: 0 0 .8rem; }
#hb-page .hb-art-grid { display: grid; gap: .7rem; }
#hb-page details.hb-article { border: 1px solid var(--hb-border); border-radius: .75rem; background: var(--tw-light, #fff);
  scroll-margin-top: 90px; overflow: hidden; }
#hb-page details.hb-article > summary { list-style: none; cursor: pointer; padding: .95rem 1.1rem; display: block; }
#hb-page details.hb-article > summary::-webkit-details-marker { display: none; }
#hb-page details.hb-article > summary:focus-visible { outline: 2px solid var(--hb-accent); outline-offset: -2px; }
#hb-page details.hb-article > summary h3 { display: inline; font-size: .95rem; font-weight: 600; color: var(--tw-gray-900); margin: 0; }
#hb-page details.hb-article > summary .s { display: block; font-size: .8rem; color: var(--tw-gray-700); margin-top: .3rem; }
#hb-page details.hb-article > summary .meta { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .45rem; }
#hb-page details.hb-article > summary .meta span { font-size: .7rem; color: var(--tw-gray-600); border: 1px solid var(--hb-border);
  border-radius: 999px; padding: .12rem .5rem; }
#hb-page details.hb-article[open] { border-color: var(--hb-accent); }
#hb-page .hb-art-body { padding: 0 1.1rem 1.1rem; border-top: 1px dashed var(--hb-border); }
#hb-page .hb-art-body h4 { font-size: .82rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: var(--tw-gray-600); margin: 1rem 0 .4rem; }
#hb-page .hb-art-body ol { margin: 0 0 0 1.2rem; padding: 0; }
#hb-page .hb-art-body ol li { font-size: .9rem; color: var(--tw-gray-800); line-height: 1.55; margin-bottom: .45rem; }
#hb-page .hb-support-note { border: 1px solid var(--hb-border); border-left: 3px solid #f6b100; border-radius: .5rem;
  padding: .7rem .9rem; font-size: .85rem; color: var(--tw-gray-800); margin-top: .8rem; background: color-mix(in srgb, #f6b100 6%, transparent); }
#hb-page .hb-art-related { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .8rem; }
#hb-page .hb-art-related a { font-size: .8rem; color: var(--hb-accent); text-decoration: none; border: 1px solid var(--hb-border);
  border-radius: 999px; padding: .25rem .7rem; }
#hb-page .hb-art-related a:hover { border-color: var(--hb-accent); }

#hb-page .hb-contact-box { text-align: center; padding: 1.8rem 1.2rem; }
#hb-page .hb-contact-box h2 { font-size: 1.2rem; font-weight: 700; color: var(--tw-gray-900); margin: 0 0 .5rem; }
#hb-page .hb-contact-box p { font-size: .9rem; color: var(--tw-gray-700); max-width: 560px; margin: 0 auto 1rem; }
#hb-page #contact-support { scroll-margin-top: 90px; }
#hb-page .hb-support-form { max-width: 720px; margin: 1.25rem auto 0; text-align: left; }
#hb-page .hb-support-fields { display: grid; gap: .85rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
#hb-page .hb-support-field { display: flex; flex-direction: column; gap: .35rem; min-width: 0; }
#hb-page .hb-support-field.full { grid-column: 1 / -1; }
#hb-page .hb-support-field label { color: var(--tw-gray-800); font-size: .85rem; font-weight: 600; }
#hb-page .hb-support-field .input, #hb-page .hb-support-field select { min-height: 44px; width: 100%; }
#hb-page .hb-support-field textarea { min-height: 150px; padding: .75rem 1rem; resize: vertical; }
#hb-page .hb-support-error { color: #b42318; font-size: .78rem; }
#hb-page .hb-support-alert { border-radius: .65rem; margin: 0 auto 1rem; max-width: 720px; padding: .8rem 1rem; text-align: left; }
#hb-page .hb-support-alert.success { background: rgba(23, 178, 106, .12); color: #067647; }
#hb-page .hb-support-alert.error { background: rgba(217, 45, 32, .1); color: #b42318; }
#hb-page .hb-honeypot { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; white-space: nowrap !important; }

#hb-page .hb-account-links { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; margin-top: 1rem; }
#hb-page .hb-account-links a { font-size: .8rem; color: var(--tw-gray-700); border: 1px solid var(--hb-border);
  border-radius: 999px; padding: .3rem .8rem; text-decoration: none; }
#hb-page .hb-account-links a:hover { color: var(--hb-accent); border-color: var(--hb-accent); }

.dark #hb-page .hb-input, .dark #hb-page .hb-suggest, .dark #hb-page .hb-quick a,
.dark #hb-page .hb-rel-card, .dark #hb-page details.hb-article,
.dark #hb-page .hb-summary-box { background: var(--tw-coal-400, #15171c); }
.dark #hb-page .hb-suggest button:hover, .dark #hb-page .hb-suggest button:focus-visible { background: rgba(255,255,255,.05); }
.dark #hb-page .hb-login-req { background: rgba(255,255,255,.07); }
@media (max-width: 480px) {
  /* Narrow phones: stack the search button under the input (bigger touch
     target, and the row can never force horizontal overflow). */
  #hb-page .hb-searchrow { flex-direction: column; }
  #hb-page .hb-btn-find { width: 100%; }
  #hb-page .hb-hero { padding-left: .25rem; padding-right: .25rem; }
  #hb-page .hb-hero h1 { font-size: 1.5rem; }
  #hb-page .hb-support-fields { grid-template-columns: 1fr; }
}

/* Dashboard-aligned visual refinement. All values resolve through the active
   theme, while the selectors remain local to the public Help surface. */
#hb-page {
  --hb-accent-active: var(--tw-primary-active);
  --hb-accent-soft: var(--tw-primary-light);
  --hb-surface: var(--tw-light);
  --hb-surface-active: var(--tw-light-active);
  --hb-text: var(--tw-gray-900);
  --hb-text-muted: var(--tw-gray-700);
  --hb-text-subtle: var(--tw-gray-600);
  --hb-shadow: var(--tw-light-box-shadow);
  --hb-transition: 200ms ease;
}
#hb-page :focus-visible { outline: 2px solid var(--hb-accent); outline-offset: 2px; }
#hb-page .hb-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
#hb-page .hb-surface-card { border-color: var(--hb-border); box-shadow: var(--hb-shadow); }
#hb-page .hb-section-title { margin: 0 0 1rem; color: var(--hb-text); font-size: 1.3rem; font-weight: 700; }

#hb-page .hb-hero { padding: 2rem clamp(1rem, 3vw, 2.5rem); }
#hb-page .hb-hero h1 { font-size: clamp(1.65rem, 2.4vw, 2rem); color: var(--hb-text); }
#hb-page .hb-hero > p { max-width: 640px; margin: 0 auto 1.25rem; color: var(--hb-text-muted); }
#hb-page .hb-searchwrap { max-width: 760px; }
#hb-page .hb-searchrow { gap: .75rem; align-items: stretch; }
#hb-page .hb-input, #hb-page .hb-btn-find { min-height: 48px; border-radius: .75rem; font-size: 1rem; }
#hb-page .hb-input { background: var(--hb-surface); color: var(--hb-text); transition: border-color var(--hb-transition), box-shadow var(--hb-transition); }
#hb-page .hb-input:hover { border-color: var(--hb-text-subtle); }
#hb-page .hb-input:focus { border-color: var(--hb-accent); box-shadow: 0 0 0 3px var(--tw-primary-clarity); outline: none; }
#hb-page .hb-btn-find { border: 1px solid var(--hb-accent); background: var(--hb-accent); color: var(--tw-primary-inverse); transition: background-color var(--hb-transition), border-color var(--hb-transition), transform var(--hb-transition), box-shadow var(--hb-transition); }
#hb-page .hb-btn-find:hover { border-color: var(--hb-accent-active); background: var(--hb-accent-active); box-shadow: var(--tw-primary-box-shadow); transform: translateY(-1px); }
#hb-page .hb-btn-find:active { transform: translateY(0); }
#hb-page .hb-btn-find:disabled { cursor: not-allowed; opacity: .65; transform: none; box-shadow: none; }
#hb-page .hb-note { color: var(--hb-text-subtle); line-height: 1.45; }
#hb-page .hb-search-note { display: flex; align-items: flex-start; justify-content: center; gap: .35rem; max-width: 620px; margin: .55rem auto 0; font-size: .7rem; }
#hb-page .hb-search-note i { flex: 0 0 auto; margin-top: .08rem; color: var(--hb-text-subtle); font-size: .8rem; }
#hb-page .hb-suggest { background: var(--hb-surface); box-shadow: var(--hb-shadow); }
#hb-page .hb-suggest button { transition: background-color var(--hb-transition); }
#hb-page .hb-suggest button:hover, #hb-page .hb-suggest button:focus-visible { background: var(--hb-surface-active); }
#hb-page .hb-suggest .t { color: var(--hb-text); }
#hb-page .hb-suggest .c { color: var(--hb-text-subtle); }

#hb-page .hb-quick { gap: .75rem; }
#hb-page .hb-quick a, #hb-page .hb-rel-card { border-color: var(--hb-border); background: var(--hb-surface); box-shadow: var(--hb-shadow); transition: border-color var(--hb-transition), box-shadow var(--hb-transition), transform var(--hb-transition), background-color var(--hb-transition); }
#hb-page .hb-quick a { min-height: 116px; justify-content: space-between; gap: .75rem; padding: 1rem; }
#hb-page .hb-quick a:hover, #hb-page .hb-rel-card:hover { border-color: var(--hb-accent); box-shadow: var(--tw-primary-box-shadow); transform: translateY(-2px); }
#hb-page .hb-quick a:active, #hb-page .hb-rel-card:active { transform: translateY(0); }
#hb-page .hb-quick i { transition: transform var(--hb-transition); }
#hb-page .hb-quick a:hover i { transform: translateY(-1px); }

#hb-page .hb-answer-card { border-color: var(--hb-border); border-left: 4px solid var(--hb-accent); box-shadow: var(--hb-shadow); }
#hb-page .hb-answer-card .card-body { padding: clamp(1rem, 2.5vw, 1.5rem); }
#hb-page .hb-answer-heading { display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; }
#hb-page .hb-answer-title, #hb-page .hb-related-title { margin: 0; color: var(--hb-text); font-size: 1.1rem; font-weight: 700; }
#hb-page .hb-related-title { margin-bottom: .75rem; font-size: 1.05rem; }
#hb-page .hb-cat-badge { padding: .3rem .7rem; background: var(--hb-accent-soft); }
#hb-page .hb-answer-text { max-width: 72ch; margin-top: .85rem; color: var(--hb-text-muted); line-height: 1.65; }
#hb-page .hb-needed { margin-top: 1rem; }
#hb-page .hb-actions { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--hb-border); }
#hb-page .hb-actions .btn, #hb-page .hb-fallback-links .btn { min-height: 40px; }
#hb-page .hb-fallback-links { margin-top: 1rem; }
#hb-page .hb-related-wrap { margin-top: 1.25rem; }

#hb-page .hb-rel-card { min-height: 100%; gap: .55rem; padding: 1rem; }
#hb-page .hb-rel-card .t { color: var(--hb-text); font-size: .95rem; }
#hb-page .hb-rel-card .s { color: var(--hb-text-muted); line-height: 1.45; }
#hb-page .hb-rel-card .m { color: var(--hb-text-subtle); }
#hb-page .hb-summary-box { padding: 1.15rem 1.25rem; background: var(--hb-surface-active); border-color: var(--hb-border); border-left-color: var(--hb-accent); }
#hb-page .hb-summary-box h3 { color: var(--hb-text); }
#hb-page .hb-summary-box dt { color: var(--hb-text-subtle); }
#hb-page .hb-summary-box dd, #hb-page .hb-summary-box ul { color: var(--hb-text-muted); line-height: 1.5; }

#hb-page .hb-topics-section { margin-top: .25rem; }
#hb-page .hb-cat-section h2 { color: var(--hb-text); }
#hb-page .hb-art-grid { gap: .75rem; }
#hb-page details.hb-article { background: var(--hb-surface); border-color: var(--hb-border); transition: border-color var(--hb-transition), box-shadow var(--hb-transition); }
#hb-page details.hb-article:hover, #hb-page details.hb-article[open] { border-color: var(--hb-accent); box-shadow: var(--hb-shadow); }
#hb-page details.hb-article > summary { padding: 1rem 1.1rem; transition: background-color var(--hb-transition); }
#hb-page details.hb-article > summary:hover { background: var(--hb-surface-active); }
#hb-page details.hb-article > summary h3 { color: var(--hb-text); }
#hb-page details.hb-article > summary .s { color: var(--hb-text-muted); line-height: 1.45; }
#hb-page details.hb-article > summary .meta span { color: var(--hb-text-subtle); }
#hb-page .hb-art-body { border-top-style: solid; }
#hb-page .hb-art-body h4 { color: var(--hb-text-subtle); }
#hb-page .hb-art-body ol li { color: var(--hb-text-muted); }
#hb-page .hb-support-note { background: var(--hb-accent-soft); border-left-color: var(--hb-accent); color: var(--hb-text-muted); }
#hb-page .hb-account-links a, #hb-page .hb-art-related a { transition: border-color var(--hb-transition), background-color var(--hb-transition), color var(--hb-transition); }
#hb-page .hb-account-links a:hover, #hb-page .hb-art-related a:hover { background: var(--hb-accent-soft); }

#hb-page .hb-contact-box { padding: clamp(1.25rem, 3vw, 2rem); }
#hb-page .hb-contact-box h2 { color: var(--hb-text); }
#hb-page .hb-contact-box > p { color: var(--hb-text-muted); line-height: 1.5; }
#hb-page .hb-support-fields { gap: .9rem; }
#hb-page .hb-support-field label { color: var(--hb-text-muted); }
#hb-page .hb-support-field .input, #hb-page .hb-support-field select { border-color: var(--hb-border); }
#hb-page .hb-support-field .input:focus, #hb-page .hb-support-field select:focus { border-color: var(--hb-accent); box-shadow: 0 0 0 3px var(--tw-primary-clarity); outline: none; }
#hb-page .hb-support-alert { border: 1px solid var(--hb-border); }

@media (min-width: 1024px) { #hb-page .hb-art-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) {
  #hb-page .hb-hero { padding: 1.25rem 1rem; }
  #hb-page .hb-hero-cta .btn, #hb-page .hb-actions .btn, #hb-page .hb-fallback-links .btn { flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) {
  #hb-page *, #hb-page *::before, #hb-page *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
}