/* Help inside the dashboard: the "?" top-bar button, the side panel / phone
   bottom sheet, and the /dashboard/help/ pages (docs/HELP_CENTRE_PLAN.md §9).
   Guide text styles live in help.css (.hlp-prose …). Not in the dark-mode
   generator — dark rules are by hand at the end. */

.topbar-help { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; border: 1px solid var(--dkl-e5e7eb, #e5e7eb); border-radius: 999px; background: var(--dkb-ffffff, #fff); color: var(--brand-ink, #1e3a8a); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.topbar-help:hover { border-color: var(--brand, #2b5cff); }
.topbar-help[aria-expanded="true"] { background: var(--brand-soft, #eef2ff); border-color: var(--brand, #2b5cff); }
.topbar-help:focus-visible { outline: 2px solid var(--brand, #2b5cff); outline-offset: 2px; }
@media (max-width: 900px) { .topbar-help { width: 40px; height: 40px; padding: 0; justify-content: center; } .topbar-help__text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } }

/* panel */
.hlpn { position: fixed; z-index: 1150; top: calc(var(--dash-top, 0px) + 64px); right: 0; bottom: 0; width: 400px; max-width: 100vw; display: flex; flex-direction: column; background: #fff; border-left: 1px solid #e5e7eb; box-shadow: -12px 0 40px rgba(15, 23, 42, .12); transform: translateX(0); transition: transform .22s ease; }
.hlpn[hidden] { display: none; }
.hlpn.is-entering { transform: translateX(100%); }
.hlpn__grab { display: none; }
.hlpn__head { display: flex; align-items: center; gap: 6px; padding: 10px 10px 10px 18px; border-bottom: 1px solid #eef0f3; }
.hlpn__title { flex: 1; margin: 0; font-size: 17px; font-weight: 650; color: #111827; letter-spacing: -0.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hlpn__icon { width: 40px; height: 40px; display: grid; place-items: center; border: 0; border-radius: 10px; background: transparent; color: #374151; cursor: pointer; }
.hlpn__icon:hover { background: #f3f4f6; }
.hlpn__icon[hidden] { display: none; }
.hlpn__body { flex: 1; overflow-y: auto; padding: 14px 18px 24px; overscroll-behavior: contain; }
.hlpn-sec { margin-bottom: 14px; }
.hlpn-search { position: relative; }
.hlpn-search svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: #6b7280; }
.hlpn-search input { width: 100%; height: 44px; padding: 0 12px 0 38px; border: 1px solid #d1d5db; border-radius: 12px; font: inherit; font-size: 15px; background: #fff; color: #111827; }
.hlpn-search input:focus { outline: 2px solid var(--brand, #2b5cff); outline-offset: 0; border-color: transparent; }
.hlpn-label { margin: 6px 0 8px; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #6b7280; }
.hlpn-list { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 8px; }
.hlpn-list a { display: grid; gap: 3px; padding: 12px 14px; border: 1px solid #e5e7eb; border-radius: 12px; color: #111827; text-decoration: none; min-height: 44px; }
.hlpn-list a:hover, .hlpn-list a:focus-visible { border-color: var(--brand, #2b5cff); }
.hlpn-list b { font-size: 15px; font-weight: 600; }
.hlpn-list small { font-size: 13.5px; line-height: 1.4; color: #4b5563; }
.hlpn-list small mark { background: #fff3c4; color: inherit; }
.hlpn-all { display: inline-block; margin: 4px 0 6px; font-size: 14px; font-weight: 600; color: var(--brand-ink, #1d4ed8); text-decoration: none; }
.hlpn-all + .hlpn-all { display: block; }
.hlpn-empty { color: #4b5563; font-size: 14.5px; }
.hlpn-title { margin: 0 0 10px; font-size: 20px; letter-spacing: -0.015em; color: #111827; outline: none; }
.hlpn-prose { font-size: 15px; line-height: 1.6; }
.hlpn-prose h2 { font-size: 18px; margin: 24px 0 8px; }
.hlpn-prose h3 { font-size: 16px; }
.hlpn-links { margin: 14px 0 0; font-size: 14px; color: #6b7280; }
.hlpn-links a { color: var(--brand-ink, #1d4ed8); }
.hlpn .hlp-stuck { flex-direction: column; align-items: flex-start; padding: 16px; margin-top: 20px; }
.hlpn .hlp-fb { padding: 14px 16px; margin: 22px 0 10px; }
.hla-link { border: 0; background: none; padding: 0; font: inherit; color: var(--brand-ink, #1d4ed8); text-decoration: underline; cursor: pointer; }
.hlp-btn { display: inline-flex; align-items: center; min-height: 44px; padding: 0 20px; border-radius: 999px; background: #111827; color: #fff; font-weight: 600; font-size: 15px; text-decoration: none; }
.hlp-btn:hover { background: #000; color: #fff; }

/* phones: bottom sheet */
@media (max-width: 768px) {
  .hlpn { top: auto; left: 0; right: 0; width: auto; height: 62vh; height: 62dvh; border-left: 0; border-radius: 18px 18px 0 0; box-shadow: 0 -12px 40px rgba(15, 23, 42, .2); }
  .hlpn.is-entering { transform: translateY(100%); }
  .hlpn.is-tall { height: 92vh; height: 92dvh; }
  .hlpn__grab { display: block; width: 44px; height: 5px; margin: 8px auto 0; border-radius: 3px; background: #d1d5db; flex: none; }
}
@media (prefers-reduced-motion: reduce) { .hlpn { transition: none; } }

/* /dashboard/help/ pages */
.hla { max-width: 1000px; }
.hla-head { margin-bottom: 22px; }
.hla-h1 { font-family: var(--font-display, inherit); font-size: 28px; letter-spacing: -0.02em; margin: 0 0 6px; color: #111827; }
.hla-h2 { font-size: 19px; margin: 26px 0 12px; }
.hla-lede { margin: 0 0 16px; font-size: 17px; color: #4b5563; max-width: 60ch; }
.hla .hlp-search { margin-top: 10px; }
.hla .hlp-search input, .hla .hlp-search .btn { height: 46px; }
.hla .hlp-search .btn { display: inline-flex; align-items: center; border: 0; background: #111827; color: #fff; font-weight: 600; font-size: 15px; cursor: pointer; }
.hla-crumbs { display: flex; flex-wrap: wrap; gap: 8px; font-size: 14px; color: #6b7280; margin-bottom: 12px; }
.hla-crumbs a { color: #374151; }
.hla-card { background: #fff; border: 1px solid #e5e7eb; border-radius: 18px; padding: 26px 28px; }
@media (max-width: 600px) { .hla-card { padding: 18px 16px; border-radius: 14px; } .hla-h1 { font-size: 23px; } }
.hla-share { margin: 18px 0 0; font-size: 14px; color: #6b7280; display: flex; gap: 14px; flex-wrap: wrap; }
.hla-share a { color: var(--brand-ink, #1d4ed8); }
.hla .hlp-cat { border-radius: 16px; }
.hla .hlp-cats { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 760px) { .hla .hlp-cats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.hla--cleaner .hlp-list a { background: #fff; }

/* dark */
html[data-theme="dark"] .topbar-help { background: #1b2232; border-color: #2f3a4f; color: #c7d4ff; }
html[data-theme="dark"] .topbar-help[aria-expanded="true"] { background: #23305a; }
html[data-theme="dark"] .hlpn { background: #141a26; border-color: #273044; }
html[data-theme="dark"] .hlpn__head { border-color: #273044; }
html[data-theme="dark"] .hlpn__title, html[data-theme="dark"] .hlpn-title, html[data-theme="dark"] .hla-h1 { color: #f1f4fa; }
html[data-theme="dark"] .hlpn__icon { color: #cfd6e4; }
html[data-theme="dark"] .hlpn__icon:hover { background: #222b3d; }
html[data-theme="dark"] .hlpn-search input { background: #0f141e; border-color: #2f3a4f; color: #f1f4fa; }
html[data-theme="dark"] .hlpn-list a, html[data-theme="dark"] .hla-card, html[data-theme="dark"] .hla .hlp-cat, html[data-theme="dark"] .hla .hlp-list a { background: #182030; border-color: #2a3448; color: #f1f4fa; }
html[data-theme="dark"] .hlpn-list small, html[data-theme="dark"] .hla .hlp-list small, html[data-theme="dark"] .hla-lede, html[data-theme="dark"] .hlpn-empty, html[data-theme="dark"] .hla .hlp-cat__sum { color: #b7c0d1; }
html[data-theme="dark"] .hlpn-all, html[data-theme="dark"] .hlpn-links a, html[data-theme="dark"] .hla-link, html[data-theme="dark"] .hla-share a, html[data-theme="dark"] .hla .hlp-more { color: #a9bdff; }
html[data-theme="dark"] .hla .hlp-cat h2 a, html[data-theme="dark"] .hla .hlp-cat li a { color: #e6ebf5; }
html[data-theme="dark"] .hlpn .hlp-prose, html[data-theme="dark"] .hla .hlp-prose { color: #d3d9e6; }
html[data-theme="dark"] .hlpn .hlp-prose strong, html[data-theme="dark"] .hla .hlp-prose strong, html[data-theme="dark"] .hlpn .hlp-prose h2, html[data-theme="dark"] .hla .hlp-prose h2, html[data-theme="dark"] .hlpn .hlp-prose h3, html[data-theme="dark"] .hla .hlp-prose h3, html[data-theme="dark"] .hlp-prose .help-ref { color: #f1f4fa; }
html[data-theme="dark"] .hlp-prose a { color: #a9bdff; }
html[data-theme="dark"] .hlp-prose .help-callout { background: #1a2a52; color: #d6e2ff; }
html[data-theme="dark"] .hlp-prose .help-callout--careful { background: #3a2412; color: #ffd9b8; }
html[data-theme="dark"] .hlp-prose code, html[data-theme="dark"] .hlp-prose kbd { background: #222b3d; border-color: #374258; color: #f1f4fa; }
html[data-theme="dark"] .hlp-prose th { background: #1e2737; color: #f1f4fa; }
html[data-theme="dark"] .hlp-prose th, html[data-theme="dark"] .hlp-prose td { border-color: #2a3448; }
html[data-theme="dark"] .hlpn .hlp-fb, html[data-theme="dark"] .hla .hlp-fb { background: #1b2232; border-color: #2a3448; }
html[data-theme="dark"] .hlp-fb__q { color: #f1f4fa; }
html[data-theme="dark"] .hlp-fb__btn { background: #141a26; border-color: #374258; color: #f1f4fa; }
html[data-theme="dark"] .hlpn .hlp-stuck, html[data-theme="dark"] .hla .hlp-stuck { background: #1a2440; }
html[data-theme="dark"] .hlpn .hlp-stuck b, html[data-theme="dark"] .hla .hlp-stuck b { color: #f1f4fa; }
html[data-theme="dark"] .hlpn .hlp-stuck p, html[data-theme="dark"] .hla .hlp-stuck p { color: #c7cfdd; }
html[data-theme="dark"] .hlp-btn { background: #e6ebf5; color: #0f141e; }
html[data-theme="dark"] .hla .hlp-search input { background: #0f141e; border-color: #2f3a4f; color: #f1f4fa; }
html[data-theme="dark"] .hlp-note { background: #3a2f12; color: #ffe7a8; }
.setup-step-how { display: inline-flex; align-items: center; min-height: 32px; margin-left: 10px; font-size: 14px; font-weight: 600; color: var(--brand-ink, #1d4ed8); text-decoration: underline; text-underline-offset: 2px; }
html[data-theme="dark"] .setup-step-how { color: #a9bdff; }