/* ReactLive Help Center — page styles on top of the Surface kit.
   Every colour, radius, spacing and motion value is an --rlx-* token from surface.css;
   nothing here hard-codes a colour, so light/dark follow the kit's data-theme. */

/* In-page navigation glides instead of snapping: the TOC, the heading copy-links and any #link in
   the prose all get it from the scrolling element, with no per-link JS; scroll-padding keeps the
   target clear of the sticky topbar. Arrival on a deep link still lands instantly (the browser
   only animates in-page jumps), and reduced-motion readers get the snap back. */
html { scroll-behavior: smooth; scroll-padding-top: 72px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

.doc-body { background: var(--rlx-background); color: var(--rlx-foreground); font-family: var(--rlx-font-sans, Inter, system-ui, sans-serif); -webkit-font-smoothing: antialiased; }

/* ── Shell ─────────────────────────────────────────────────────────────── */
.doc-shell { --rlx-sidebar-width: 272px; }
.doc-sidebar { border-right: 1px solid var(--rlx-divider); }
.doc-brand { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: var(--rlx-space-2) var(--rlx-space-5) var(--rlx-space-2); text-decoration: none; color: inherit; }
.doc-logo { display: block; width: 176px; height: auto; }
:root[data-theme="dark"] .doc-logo--on-light, :root:not([data-theme="dark"]) .doc-logo--on-dark { display: none; }
.doc-brand-meta { padding-left: 2px; font-size: var(--rlx-type-caps-size); font-weight: var(--rlx-type-caps-weight); letter-spacing: var(--rlx-tracking-wider); text-transform: uppercase; color: var(--rlx-text-muted); }
.doc-nav .rlx-sidebar-item { display: flex; align-items: center; gap: var(--rlx-space-3); min-height: 34px; padding: 5px var(--rlx-space-3); border-radius: var(--rlx-radius-md); color: var(--rlx-text-sub); text-decoration: none; font-size: var(--rlx-fs-small); }
/* The kit's sidebar rows are disclosure-style: a trailing chevron and a single nowrap, ellipsised
   line. These are plain page links, so no chevron, and a long title wraps to a second line rather
   than being cut ("Run the room (Engage)", "Troubleshooting & FAQ"). */
.doc-sidebar .rlx-sidebar-item::after { display: none; }
.doc-nav .rlx-sidebar-item-label { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.3; }
.doc-nav .rlx-sidebar-item:hover { background: var(--rlx-content2); color: var(--rlx-text-strong); }
.doc-nav .rlx-sidebar-item[data-current="true"] { background: var(--rlx-content3); color: var(--rlx-text-strong); font-weight: var(--rlx-fw-semibold); }
.doc-sidebar-footer { padding: var(--rlx-space-3) 0 0; border-top: 1px solid var(--rlx-divider); }
.doc-sidebar-footer .rlx-sidebar-item { display: flex; min-height: 32px; align-items: center; padding: 0 var(--rlx-space-3); font-size: var(--rlx-fs-tiny); color: var(--rlx-text-muted); text-decoration: none; border-radius: var(--rlx-radius-md); }
.doc-sidebar-footer .rlx-sidebar-item:hover { color: var(--rlx-text-strong); background: var(--rlx-content2); }

.doc-topbar { border-bottom: 1px solid var(--rlx-divider); }
.doc-topbar-title { display: flex; align-items: center; gap: var(--rlx-space-2); min-width: 0; font-size: var(--rlx-fs-small); color: var(--rlx-text-sub); }
.doc-topbar-title strong { color: var(--rlx-text-strong); font-weight: var(--rlx-fw-semibold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.doc-crumb-sep { color: var(--rlx-text-muted); }
.doc-topbar-actions { display: flex; align-items: center; gap: var(--rlx-space-2); }
.doc-menu-btn { display: none; }
.doc-open-btn { height: 34px; padding: 0 var(--rlx-space-4); font-size: var(--rlx-fs-small); text-decoration: none; }
.doc-theme-btn svg { width: 18px; height: 18px; }
:root[data-theme="dark"] .doc-ic-sun, :root:not([data-theme="dark"]) .doc-ic-moon { display: none; }

/* ── Layout: article + TOC ─────────────────────────────────────────────── */
.doc-layout { display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: var(--rlx-space-8); max-width: 1180px; width: 100%; margin: 0 auto; padding: 0 var(--rlx-space-6); }
.doc-page { padding: var(--rlx-space-8) 0 var(--rlx-space-16); max-width: 820px; margin: 0; }
.doc-aside { padding-top: var(--rlx-space-8); }
.doc-toc { position: sticky; top: 72px; font-size: var(--rlx-fs-tiny); }
.doc-toc-label { margin: 0 0 var(--rlx-space-2); font-size: var(--rlx-type-caps-size); font-weight: var(--rlx-type-caps-weight); letter-spacing: var(--rlx-tracking-wider); text-transform: uppercase; color: var(--rlx-text-muted); }
.doc-toc ul { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--rlx-divider); }
.doc-toc a { display: block; padding: 4px 0 4px 12px; margin-left: -1px; border-left: 2px solid transparent; color: var(--rlx-text-sub); text-decoration: none; line-height: 1.5; }
.doc-toc a:hover { color: var(--rlx-text-strong); }
.doc-toc a.is-active { color: var(--rlx-accent); border-left-color: var(--rlx-accent); }

/* ── Prose ─────────────────────────────────────────────────────────────── */
.doc-prose { font-size: var(--rlx-fs-medium, 15px); line-height: 1.7; color: var(--rlx-text-sub); }
.doc-prose > :first-child { margin-top: 0; }
.doc-prose p { margin: 0 0 var(--rlx-space-4); }
.doc-prose strong { color: var(--rlx-text-strong); font-weight: var(--rlx-fw-semibold); }
.doc-prose a { color: var(--rlx-accent); text-decoration: none; }
.doc-prose a:hover { text-decoration: underline; }
.doc-prose h2 { display: flex; align-items: center; gap: var(--rlx-space-2); margin: var(--rlx-space-10, 48px) 0 var(--rlx-space-3); padding-top: var(--rlx-space-6); border-top: 1px solid var(--rlx-divider); font-size: var(--rlx-fs-xl, 1.25rem); font-weight: var(--rlx-fw-bold); letter-spacing: var(--rlx-tracking-tight); color: var(--rlx-text-strong); scroll-margin-top: 72px; }
.doc-prose h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.doc-prose h3 { margin: var(--rlx-space-6) 0 var(--rlx-space-2); font-size: var(--rlx-type-title-size, 1.05rem); font-weight: var(--rlx-fw-semibold); color: var(--rlx-text-strong); scroll-margin-top: 72px; }
.doc-prose h4 { margin: var(--rlx-space-4) 0 var(--rlx-space-1); font-size: var(--rlx-fs-small); font-weight: var(--rlx-fw-semibold); letter-spacing: var(--rlx-tracking-wide); text-transform: uppercase; color: var(--rlx-text-muted); }
.doc-prose ul, .doc-prose ol { margin: 0 0 var(--rlx-space-4); padding-left: var(--rlx-space-6); }
.doc-prose li { margin-bottom: var(--rlx-space-2); }
.doc-prose li::marker { color: var(--rlx-text-muted); }
.doc-prose code, .doc-ui { font-family: var(--rlx-font-mono); font-size: .9em; background: var(--rlx-content2); border: 1px solid var(--rlx-divider); padding: 1px 6px; border-radius: 4px; color: var(--rlx-text-strong); }
.doc-ui { font-family: inherit; font-size: .92em; font-weight: var(--rlx-fw-semibold); white-space: nowrap; }
.doc-prose pre { margin: 0 0 var(--rlx-space-4); padding: var(--rlx-space-4) var(--rlx-space-5); background: var(--rlx-content1); border: 1px solid var(--rlx-divider); border-radius: var(--rlx-radius-lg); font-family: var(--rlx-font-mono); font-size: var(--rlx-fs-tiny); line-height: 1.55; overflow-x: auto; }
.doc-prose pre code { background: none; border: 0; padding: 0; }
.doc-prose hr { border: 0; border-top: 1px solid var(--rlx-divider); margin: var(--rlx-space-6) 0; }

/* Anchor link that appears on hover of an h2 */
.doc-anchor { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; color: var(--rlx-text-muted); opacity: 0; transition: opacity var(--rlx-duration-fast) var(--rlx-ease-default); }
.doc-anchor svg { width: 14px; height: 14px; }
.doc-prose h2:hover .doc-anchor, .doc-anchor:focus-visible { opacity: 1; }
.doc-anchor:hover { background: var(--rlx-content2); color: var(--rlx-accent); }

/* Tables */
.doc-table-wrap { overflow-x: auto; margin: 0 0 var(--rlx-space-5); border: 1px solid var(--rlx-divider); border-radius: var(--rlx-radius-lg); }
.doc-prose table { width: 100%; border-collapse: collapse; font-size: var(--rlx-fs-small); }
.doc-prose th { text-align: left; padding: 10px 14px; background: var(--rlx-content2); color: var(--rlx-text-strong); font-weight: var(--rlx-fw-semibold); border-bottom: 1px solid var(--rlx-divider); white-space: nowrap; }
.doc-prose td { padding: 10px 14px; border-bottom: 1px solid var(--rlx-divider); vertical-align: top; }
.doc-prose tr:last-child td { border-bottom: 0; }

/* Callouts (kit .rlx-callout--soft + a kind tint) */
.doc-callout { margin: 0 0 var(--rlx-space-5); }
.doc-callout .rlx-callout-icon { width: 28px; height: 28px; border-radius: var(--rlx-radius-full); }
.doc-callout .rlx-callout-icon svg { width: 16px; height: 16px; }
.doc-callout .rlx-callout-title { font-size: var(--rlx-fs-small); margin-bottom: 2px; }
.doc-callout .rlx-callout-text { font-size: var(--rlx-fs-small); color: var(--rlx-text-sub); }
.doc-callout .rlx-callout-text p:last-child { margin-bottom: 0; }
.doc-callout--tip .rlx-callout-icon { background: var(--rlx-success-soft); color: var(--rlx-success-soft-foreground); }
.doc-callout--note .rlx-callout-icon { background: var(--rlx-accent-soft); color: var(--rlx-accent-soft-foreground); }
.doc-callout--warn .rlx-callout-icon { background: var(--rlx-warning-soft); color: var(--rlx-warning-soft-foreground); }

/* "Where to find it" line */
.doc-where { padding-left: var(--rlx-space-3); border-left: 2px solid rgb(var(--rlx-accent-rgb) / .45); font-size: var(--rlx-fs-small); color: var(--rlx-text-sub); }

/* Screenshots — every capture sits on a mat (a lighter elevation surface with a border and
   shadow) so a dark UI still separates from the dark ground; desktop captures also get a
   window-chrome bar. Wide captures fill the column; portrait ones (phone frames, the account
   sidebar) sit at natural width, height-capped, the mat hugging the image. */
.doc-shot { margin: var(--rlx-space-4) 0 var(--rlx-space-6); }
.doc-shot-frame { --doc-mat: color-mix(in srgb, var(--rlx-content3) 82%, var(--rlx-foreground)); background: var(--doc-mat); border: 1px solid color-mix(in srgb, var(--rlx-separator) 60%, var(--rlx-foreground)); border-radius: var(--rlx-radius-lg); padding: 8px; box-shadow: var(--rlx-shadow-md), 0 0 0 1px rgb(0 0 0 / .18); }
.doc-shot-bar { display: flex; gap: 6px; padding: 2px 6px 8px; }
.doc-shot-bar span { width: 10px; height: 10px; border-radius: 50%; background: var(--rlx-text-muted); opacity: .5; }
.doc-shot img { display: block; max-width: 100%; width: auto; height: auto; border-radius: var(--rlx-radius-sm); border: 1px solid rgb(0 0 0 / .25); }
.doc-shot:not(.doc-shot--portrait) img { width: 100%; }
.doc-shot--portrait { text-align: center; }
.doc-shot--portrait .doc-shot-frame { display: inline-block; }
.doc-shot--portrait img { max-height: 640px; }
.doc-shot figcaption { text-align: left; }
.doc-shot--portrait figcaption { text-align: center; }
.doc-shot figcaption { margin-top: var(--rlx-space-2); font-size: var(--rlx-fs-tiny); color: var(--rlx-text-muted); }
.doc-shot-pending { display: flex; align-items: center; justify-content: center; gap: var(--rlx-space-3); min-height: 180px; padding: var(--rlx-space-6); border: 1px dashed var(--rlx-separator); border-radius: var(--rlx-radius-lg); background: var(--rlx-content1); color: var(--rlx-text-muted); font-size: var(--rlx-fs-small); }
.doc-shot-pending svg { width: 22px; height: 22px; flex-shrink: 0; }

/* Step lists, cards, key/value grids */
.doc-steps { counter-reset: step; list-style: none; padding: 0; margin: 0 0 var(--rlx-space-5); }
.doc-steps > li { position: relative; padding: 0 0 var(--rlx-space-4) 44px; }
.doc-steps > li::before { counter-increment: step; content: counter(step); position: absolute; left: 0; top: 0; width: 28px; height: 28px; display: grid; place-items: center; border-radius: var(--rlx-radius-full); background: var(--rlx-accent); color: var(--rlx-accent-foreground, #fff); font-size: var(--rlx-fs-tiny); font-weight: var(--rlx-fw-bold); }
.doc-steps > li > strong:first-child { display: block; color: var(--rlx-text-strong); margin-bottom: 2px; }
.doc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--rlx-space-3); margin: 0 0 var(--rlx-space-5); }
.doc-card { padding: var(--rlx-space-4); border-radius: var(--rlx-radius-lg); background: var(--rlx-content1); border: 1px solid var(--rlx-divider); }
.doc-card h3, .doc-card h4 { margin: 0 0 4px; }
.doc-card p { margin: 0; font-size: var(--rlx-fs-small); }
.doc-card a.doc-card-link { display: inline-block; margin-top: var(--rlx-space-2); font-size: var(--rlx-fs-small); font-weight: var(--rlx-fw-semibold); }
.doc-kv { display: grid; grid-template-columns: max-content 1fr; gap: 6px var(--rlx-space-4); margin: 0 0 var(--rlx-space-5); font-size: var(--rlx-fs-small); }
.doc-kv dt { color: var(--rlx-text-strong); font-weight: var(--rlx-fw-semibold); }
.doc-kv dd { margin: 0; }

/* ── Agent identity colours ────────────────────────────────────────────────
   The Admin Center's capability palette (pubble-admin-center theme.ts CAP_TINT), adopted as the
   shared identity per UI review v1.5 §UI-07: Protect indigo · Engage pink · Answer green ·
   Report purple · Setup blue. Light ground uses the Admin Center's exact fg/bg; the dark ground
   uses the next-lighter step of the same hue family for text and a translucent tint for fills. */
:root {
  --doc-agent-engage: #eb2f96;  --doc-agent-engage-soft: #fff0f6;
  --doc-agent-answer: #52c41a;  --doc-agent-answer-soft: #f6ffed;
  --doc-agent-protect: #2f54eb; --doc-agent-protect-soft: #f0f5ff;
  --doc-agent-report: #722ed1;  --doc-agent-report-soft: #f9f0ff;
  --doc-agent-setup: #116dfc;   --doc-agent-setup-soft: #e6f4ff;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --doc-agent-engage: #ff85c0;  --doc-agent-engage-soft: rgb(235 47 150 / .18);
    --doc-agent-answer: #95de64;  --doc-agent-answer-soft: rgb(82 196 26 / .18);
    --doc-agent-protect: #85a5ff; --doc-agent-protect-soft: rgb(47 84 235 / .22);
    --doc-agent-report: #b37feb;  --doc-agent-report-soft: rgb(114 46 209 / .22);
    --doc-agent-setup: #69b1ff;   --doc-agent-setup-soft: rgb(17 109 252 / .2);
  }
}
:root[data-theme="dark"] {
  --doc-agent-engage: #ff85c0;  --doc-agent-engage-soft: rgb(235 47 150 / .18);
  --doc-agent-answer: #95de64;  --doc-agent-answer-soft: rgb(82 196 26 / .18);
  --doc-agent-protect: #85a5ff; --doc-agent-protect-soft: rgb(47 84 235 / .22);
  --doc-agent-report: #b37feb;  --doc-agent-report-soft: rgb(114 46 209 / .22);
  --doc-agent-setup: #69b1ff;   --doc-agent-setup-soft: rgb(17 109 252 / .2);
}
[data-agent="engage"]  { --doc-agent-c: var(--doc-agent-engage);  --doc-agent-s: var(--doc-agent-engage-soft); }
[data-agent="answer"]  { --doc-agent-c: var(--doc-agent-answer);  --doc-agent-s: var(--doc-agent-answer-soft); }
[data-agent="protect"] { --doc-agent-c: var(--doc-agent-protect); --doc-agent-s: var(--doc-agent-protect-soft); }
[data-agent="report"]  { --doc-agent-c: var(--doc-agent-report);  --doc-agent-s: var(--doc-agent-report-soft); }
[data-agent="setup"]   { --doc-agent-c: var(--doc-agent-setup);   --doc-agent-s: var(--doc-agent-setup-soft); }

/* Inline identity chip — the label stays; colour reinforces it */
.doc-agent { display: inline-flex; align-items: center; gap: 6px; padding: 0 8px 0 7px; height: 22px; border-radius: var(--rlx-radius-full); font-size: .86em; font-weight: var(--rlx-fw-semibold); color: var(--doc-agent-c); background: var(--doc-agent-s); vertical-align: baseline; white-space: nowrap; }
.doc-agent::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
/* Heading mark — the icon disc beside an agent's section title */
.doc-agent-mark { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: var(--rlx-radius-full); background: var(--doc-agent-s); color: var(--doc-agent-c); flex-shrink: 0; }
.doc-agent-mark svg { width: 18px; height: 18px; }
/* Sidebar icons — the kit's glyphs, muted until the row is current; the three agent-section
   rows keep their agent colour in every state, the same way the console's sidebar does */
.doc-nav-icon { width: 16px; height: 16px; flex-shrink: 0; color: var(--rlx-text-muted); }
.rlx-sidebar-item:hover .doc-nav-icon, .rlx-sidebar-item[data-current="true"] .doc-nav-icon { color: var(--rlx-text-strong); }
.doc-nav-icon[data-agent] { color: var(--doc-agent-c); }

/* Agent level chips — quoting the console's own control */
.doc-level { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: var(--rlx-radius-full); font-size: var(--rlx-fs-micro); font-weight: var(--rlx-fw-bold); letter-spacing: var(--rlx-tracking-wider); text-transform: uppercase; background: var(--rlx-content3); color: var(--rlx-text-strong); vertical-align: middle; }
.doc-level--off { background: var(--rlx-content2); color: var(--rlx-text-muted); }
.doc-level--assist { background: var(--rlx-accent-soft); color: var(--rlx-accent-soft-foreground); }
.doc-level--auto { background: var(--rlx-success-soft); color: var(--rlx-success-soft-foreground); }
.doc-levels { display: grid; gap: var(--rlx-space-3); margin: 0 0 var(--rlx-space-5); }
.doc-levels > div { display: grid; grid-template-columns: 84px 1fr; gap: var(--rlx-space-3); align-items: start; padding: var(--rlx-space-4); border-radius: var(--rlx-radius-lg); background: var(--rlx-content1); border: 1px solid var(--rlx-divider); }
.doc-levels h3 { margin: 0 0 2px; }
.doc-levels p { margin: 0; font-size: var(--rlx-fs-small); }

/* FAQ */
.doc-faq dt { margin: var(--rlx-space-4) 0 4px; font-weight: var(--rlx-fw-semibold); color: var(--rlx-text-strong); }
.doc-faq dd { margin: 0 0 var(--rlx-space-3); }

/* Prev / next + footer */
.doc-prevnext { display: grid; grid-template-columns: 1fr 1fr; gap: var(--rlx-space-3); margin-top: var(--rlx-space-10, 48px); padding-top: var(--rlx-space-6); border-top: 1px solid var(--rlx-divider); }
.doc-pn { display: flex; flex-direction: column; gap: 2px; padding: var(--rlx-space-3) var(--rlx-space-4); border-radius: var(--rlx-radius-lg); border: 1px solid var(--rlx-divider); background: var(--rlx-content1); text-decoration: none; color: inherit; }
.doc-pn:hover { border-color: var(--rlx-accent); }
.doc-pn--next { text-align: right; }
.doc-pn-label { font-size: var(--rlx-fs-tiny); color: var(--rlx-text-muted); }
.doc-pn-title { font-size: var(--rlx-fs-small); font-weight: var(--rlx-fw-semibold); color: var(--rlx-text-strong); }
.doc-foot { margin-top: var(--rlx-space-8); font-size: var(--rlx-fs-tiny); color: var(--rlx-text-muted); }
.doc-foot a { color: var(--rlx-accent); text-decoration: none; }

/* Signed-in user block (sidebar footer; filled by docs.js from /api/v2/profile/init) */
.doc-user { display: flex; align-items: center; gap: var(--rlx-space-3); margin: 0 var(--rlx-space-3) var(--rlx-space-2); padding: var(--rlx-space-2) var(--rlx-space-3); border-radius: var(--rlx-radius-lg); background: var(--rlx-content2); }
.doc-user[hidden] { display: none; }
.doc-user-avatar { display: grid; place-items: center; flex-shrink: 0; width: 32px; height: 32px; border-radius: var(--rlx-radius-full); overflow: hidden; background: var(--rlx-accent-soft); color: var(--rlx-accent-soft-foreground); font-size: var(--rlx-fs-tiny); font-weight: var(--rlx-fw-bold); }
.doc-user-avatar img { display: block; width: 100%; height: 100%; object-fit: cover; }
.doc-user-meta { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.doc-user-name { font-size: var(--rlx-fs-small); font-weight: var(--rlx-fw-semibold); color: var(--rlx-text-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.doc-user-sub { font-size: var(--rlx-fs-tiny); color: var(--rlx-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.doc-user-signout { margin-left: auto; width: 30px; height: 30px; flex-shrink: 0; }
.doc-user-signout svg { width: 16px; height: 16px; }
.doc-user-signout:disabled { opacity: var(--rlx-opacity-disabled, .5); }

/* ── Responsive ────────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .doc-layout { grid-template-columns: minmax(0, 1fr); }
  .doc-aside { display: none; }
}
@media (max-width: 900px) {
  .doc-shell { grid-template-columns: 1fr; }
  .doc-sidebar { position: fixed; inset: 0 auto 0 0; width: var(--rlx-sidebar-width); max-width: 86vw; z-index: 400; transform: translateX(-100%); transition: transform var(--rlx-duration) var(--rlx-ease-default); box-shadow: var(--rlx-shadow-lg); }
  .doc-shell[data-nav-open="true"] .doc-sidebar { transform: none; }
  .doc-scrim { position: fixed; inset: 0; z-index: 390; background: rgb(0 0 0 / .45); }
  .doc-scrim[hidden] { display: none; }
  .doc-menu-btn { display: inline-grid; }
  .doc-open-btn { display: none; }
  .doc-layout { padding: 0 var(--rlx-space-4); }
  .doc-page { padding-top: var(--rlx-space-6); }
  .doc-prevnext { grid-template-columns: 1fr; }
  .doc-levels > div { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .doc-sidebar, .doc-anchor { transition: none; } }