/* Qixo guides — shared styling for the full-page viewer (/docs) and the in-app help window.
   Must be global (not component-scoped): the guide HTML is a MarkupString, so scoped selectors
   wouldn't reach its <h1>/<pre>/<table> etc. */

.docs-page { display: flex; height: 100%; line-height: 1.62;
    color: var(--kendo-color-on-app-surface, #1b2230);
    font-family: var(--kendo-font-family, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif); }

/* sidebar */
.docs-nav { flex: 0 0 258px; overflow-y: auto; padding: 20px 14px 40px; font-size: 13.5px;
    background: var(--kendo-color-base-subtle, #f5f6f9); border-right: 1px solid var(--kendo-color-border, #e5e8ef); }
.docs-nav-home { display: flex; align-items: center; gap: 9px; font-weight: 670; font-size: 15px;
    padding: 2px 8px 16px; text-decoration: none; color: inherit; letter-spacing: -.01em; }
.docs-nav-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--kendo-color-primary, #ff6358); }
.docs-nav-section { margin: 16px 0 3px; padding: 0 8px; font-size: 10.5px; font-weight: 640;
    letter-spacing: .08em; text-transform: uppercase; opacity: .55; }
.docs-nav-link { display: block; padding: 5px 10px; margin: 1px 0; border-radius: 7px; text-decoration: none;
    color: inherit; opacity: .82; border-left: 2px solid transparent; cursor: pointer; }
.docs-nav-link:hover { background: rgba(128, 128, 128, .10); opacity: 1; }
.docs-nav-link.active { background: color-mix(in srgb, var(--kendo-color-primary, #3b82f6) 14%, transparent);
    color: var(--kendo-color-primary, #3b82f6); font-weight: 600; opacity: 1;
    border-left-color: var(--kendo-color-primary, #3b82f6); }

/* content */
.docs-content { flex: 1 1 auto; overflow-y: auto; padding: 34px 52px 90px; }
.docs-body { max-width: 820px; margin: 0; }
.docs-body h1 { font-size: 31px; font-weight: 710; letter-spacing: -.02em; line-height: 1.15; margin: 0 0 6px; text-wrap: balance; }
.docs-body h1 + p { font-size: 16.5px; opacity: .72; margin: 0 0 22px; }
.docs-body h2 { font-size: 20px; font-weight: 660; letter-spacing: -.01em; margin: 34px 0 12px;
    padding-bottom: 7px; border-bottom: 1px solid var(--kendo-color-border, #e5e8ef); }
.docs-body h3 { font-size: 15.5px; font-weight: 650; margin: 24px 0 8px; }
.docs-body p { margin: 12px 0; }
.docs-body a { color: var(--kendo-color-primary, #e24a38); text-decoration: none; border-bottom: 1px solid rgba(255, 99, 88, .28); }
.docs-body a:hover { border-bottom-color: var(--kendo-color-primary, #e24a38); }
.docs-body strong { font-weight: 640; }
.docs-body ul, .docs-body ol { margin: 12px 0; padding-left: 22px; }
.docs-body li { margin: 6px 0; }
.docs-body li::marker { opacity: .5; }

/* inline code — a neutral chip (no accent), readable on light and dark */
.docs-body code { font-family: ui-monospace, "Cascadia Code", Consolas, "Liberation Mono", monospace;
    font-size: .85em; background: rgba(135, 145, 165, .18); color: inherit; padding: 1.5px 5px; border-radius: 5px; }
/* code blocks — always dark (like an editor), so syntax colours read on any app theme */
.docs-body pre { background: #1e2531; border: 1px solid #2b3444; border-radius: 9px;
    padding: 15px 18px; overflow-x: auto; margin: 15px 0; line-height: 1.55; }
.docs-body pre code { background: none; padding: 0; color: #c9d1de; font-size: 12.8px; }

/* syntax palette — scoped under pre so it always wins over the inline-code rule */
.docs-body pre .tok-comment { color: #6f7891; font-style: italic; }
.docs-body pre .tok-key { color: #7cc5ff; }
.docs-body pre .tok-str { color: #9ece6a; }
.docs-body pre .tok-num { color: #e5b06b; }
.docs-body pre .tok-punct { color: #8b93a7; }

.docs-body table { border-collapse: collapse; width: 100%; margin: 16px 0; font-size: 14px; }
.docs-body th { background: var(--kendo-color-base-subtle, #f5f6f9); text-align: left; font-weight: 640;
    border-bottom: 2px solid var(--kendo-color-border, #e5e8ef); padding: 9px 13px; }
.docs-body td { border-bottom: 1px solid var(--kendo-color-border, #eef0f5); padding: 9px 13px; vertical-align: top; }
.docs-body tbody tr:hover { background: rgba(128, 128, 128, .05); }

.docs-body blockquote { margin: 16px 0; padding: 9px 16px; border-left: 3px solid #ef5f4c;
    background: rgba(255, 99, 88, .09); border-radius: 0 8px 8px 0; }
.docs-body blockquote p { margin: 6px 0; }
.docs-body h1:first-child { margin-top: 0; }

/* in-app help window — full-bleed content so the two panes reach the window edges */
.docs-window .k-window-content { padding: 0; overflow: hidden; }
.docs-window .docs-page { height: 100%; }
.docs-win-title { display: flex; align-items: center; gap: 9px; font-weight: 640; }