/* Plugin documentation chrome. Colours/fonts come from docs-theme.css (shared
   OX Recorder design system); layout mirrors oxrecorder-website/css/tokens.css
   .doc-shell: 264px sidebar / <=760px content / 208px outline, outline hidden
   below 1280px, sidebar becomes a drawer below 920px. No shadows, hairline cards. */
:root { --doc-top: 64px; }
body[data-plugin-doc-page] { font-size: 16px; line-height: 1.5; }
.plugin-doc-wrap { max-width: none; margin: 0; padding: 0; }
.plugin-doc-wrap > .msg { margin: 0 auto; max-width: 1280px; }
.plugin-doc-layout {
  --rail-w: 264px;
  display: grid; grid-template-columns: var(--rail-w) minmax(0, 1fr) 208px; gap: 0 40px; align-items: start;
  max-width: 1280px; margin: 0 auto; padding: 0 var(--gutter, 32px);
  /* sidebar divider: drawn on the grid so it stays full height */
  background: linear-gradient(var(--hairline), var(--hairline)) calc(var(--rail-w) - 1px) 0 / 1px 100% no-repeat;
  background-origin: content-box;
}
/* Side rails never get their own scrollbar: pinned while they fit in the
   viewport, scrolling with the page (.is-static, set by bindRails) otherwise. */
.plugin-doc-toc.is-static, .doc-outline.is-static { position: static; }
#userPortalHeader { position: sticky; top: 0; z-index: 50; }
#userPortalHeader .topbar { min-height: var(--doc-top); }

/* Sidebar */
.plugin-doc-toc {
  position: sticky; top: var(--doc-top); z-index: 5; align-self: start; min-width: 0;
  max-height: none; padding: 28px 20px 40px 0; gap: 12px;
  background: transparent; border: 0; border-radius: 0 !important; box-shadow: none;
}
.plugin-doc-toc > .doc-search, .plugin-doc-toc > strong { flex-shrink: 0; }
.plugin-doc-toc > strong { display: none; }
.plugin-doc-nav { display: flex; flex-direction: column; gap: 0; min-height: 0; }
.plugin-doc-nav > * { flex-shrink: 0; }
.plugin-doc-nav:focus-visible { outline: 2px solid var(--primary-focus); outline-offset: 2px; }
.plugin-doc-toc .toc-section { margin: 24px 0 8px; padding: 0 10px; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.plugin-doc-toc .toc-section:first-child { margin-top: 4px; }
.plugin-doc-toc a { display: block; padding: 6px 10px; border: 0; border-left: 2px solid transparent; border-radius: var(--r-md); font-size: 14px; line-height: 1.4; color: var(--body); text-decoration: none; }
.plugin-doc-toc a:hover { background: var(--surface-hover); color: var(--ink); }
.plugin-doc-toc a.active { color: var(--ink); font-weight: 500; background: var(--surface-hover); border-left-color: var(--primary); border-radius: 0 var(--r-md) var(--r-md) 0; }

/* Content */
.plugin-doc-page { display: block; min-width: 0; max-width: 760px; width: 100%; padding: 40px 0 96px; }
.plugin-doc-page, .plugin-doc-page .doc-section { color: var(--body); }
.doc-crumb { margin: 0 0 12px; color: var(--muted); font-size: 13px; }
.doc-crumb a { color: var(--muted); text-decoration: none; }
.doc-crumb a:hover { color: var(--ink); }
.doc-page-heading { display: block; margin: 0 0 8px; }
.doc-page-heading h1 { margin: 0 0 12px; color: var(--ink); font-size: clamp(30px, 4.5vw, 40px); font-weight: 400; line-height: 1.15; letter-spacing: -0.025em; }
.doc-page-heading .muted { max-width: 760px; margin: 0; color: var(--body); font-size: 17px; line-height: 1.6; }
.doc-page-heading .inline-actions { gap: 18px; margin-top: 16px; align-items: center; justify-content: flex-start; }
.doc-page-heading .inline-actions a { font-size: 13px; color: var(--muted); text-decoration: underline; text-decoration-color: var(--hairline-strong); text-underline-offset: 3px; }
.doc-page-heading .inline-actions a:hover { color: var(--primary-text); text-decoration-color: var(--primary-text); }

.plugin-doc-page > .doc-section, .plugin-doc-page .doc-section { padding: 0; margin: 0; background: transparent; border: 0; border-radius: 0; }
.plugin-doc-page .doc-section > :last-child { margin-bottom: 0; }
.plugin-doc-page .doc-section h3 { margin: 56px 0 16px; padding-top: 8px; color: var(--ink); font-size: 26px; font-weight: 400; line-height: 1.25; letter-spacing: -0.0125em; }
.plugin-doc-page .doc-section h4 { margin: 32px 0 8px; color: var(--ink); font-size: 18px; font-weight: 600; line-height: 1.4; letter-spacing: 0; }
.plugin-doc-page h3, .plugin-doc-page h4 { scroll-margin-top: calc(var(--doc-top) + 16px); overflow-wrap: anywhere; }
.plugin-doc-page .doc-section p, .plugin-doc-page .doc-section li { color: var(--body); font-size: 16px; line-height: 1.7; font-weight: 400; }
.plugin-doc-page .doc-section p { margin: 0 0 16px; }
.plugin-doc-page .doc-section ul, .plugin-doc-page .doc-section ol { margin: 0 0 16px; padding-left: 22px; }
.plugin-doc-page .doc-section strong { color: var(--ink); font-weight: 600; }
.plugin-doc-page .doc-section a:not(.header-action-button):not(.doc-hub-card):not(.dl-btn):not(.dl-link) { color: var(--ink); text-decoration: underline; text-decoration-color: var(--hairline-strong); text-underline-offset: 3px; }
.plugin-doc-page .doc-section a:not(.header-action-button):not(.doc-hub-card):not(.dl-btn):not(.dl-link):hover { color: var(--primary-text); text-decoration-color: var(--primary-text); }
.plugin-doc-page hr { border: 0; border-top: 1px solid var(--border); margin: 40px 0; }
.plugin-doc-page img { max-width: 100%; border-radius: var(--r-lg); border: 1px solid var(--border); }
.plugin-doc-page blockquote { margin: 20px 0; padding: 14px 16px 14px 18px; border: 1px solid var(--border); border-left: 3px solid var(--muted-soft); border-radius: var(--r-md); background: var(--surface-card); overflow-wrap: anywhere; }
.plugin-doc-page blockquote > :last-child { margin-bottom: 0; }

/* Inline code, code blocks, syntax colours (theme-aware via docs-theme.css) */
.plugin-doc-page .doc-section :not(pre) > code { font-size: .875em; font-weight: 400; padding: .12em .4em; border: 0; border-radius: var(--r-xs); background: var(--surface-strong); color: var(--ink); overflow-wrap: anywhere; }
.plugin-doc-page pre { overflow-x: auto; }
.doc-code-block { position: relative; min-width: 0; min-height: 56px; margin: 20px 0; background: var(--code-bg); border: 1px solid var(--border); border-radius: var(--r-lg); }
.plugin-doc-page .doc-code-block pre { margin: 0; padding: 18px 20px; border: 0; border-radius: var(--r-lg); background: transparent; }
.plugin-doc-page .doc-code-block pre code, .plugin-doc-page .doc-section pre code { padding: 0; background: transparent; color: var(--code-text); font-size: 13px; line-height: 1.6; }
.doc-code-block .hljs { background: transparent !important; color: var(--code-text); }
.doc-code-block :is(.hljs-comment, .hljs-quote, .hljs-meta) { color: var(--code-comment); font-style: italic; }
.doc-code-block :is(.hljs-keyword, .hljs-selector-tag, .hljs-built_in, .hljs-literal, .hljs-type) { color: var(--code-keyword); }
.doc-code-block :is(.hljs-string, .hljs-regexp, .hljs-addition, .hljs-template-tag) { color: var(--code-string); }
.doc-code-block :is(.hljs-number, .hljs-symbol, .hljs-bullet) { color: var(--code-number); }
.doc-code-block :is(.hljs-title, .hljs-section, .hljs-title.function_) { color: var(--code-title); }
.doc-code-block :is(.hljs-attr, .hljs-attribute, .hljs-variable, .hljs-property, .hljs-params) { color: var(--code-attr); }
.doc-code-block .hljs-deletion { color: var(--error); }
.doc-copy-code { position: absolute; top: 10px; right: 10px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; width: 108px; height: 30px; padding: 0 8px; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface-card); color: var(--muted); font: 500 12px/1 var(--font-sans); white-space: nowrap; opacity: 0; transition: opacity .15s var(--ease); }
.doc-code-block:hover .doc-copy-code, .doc-code-block:focus-within .doc-copy-code { opacity: 1; }
.doc-copy-code:hover { color: var(--ink); background: var(--surface-card); border-color: var(--hairline-strong); }
.doc-copy-status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.doc-copy-status.copy-error { position: static; display: block; width: auto; height: auto; overflow: visible; clip-path: none; white-space: normal; padding: 0 12px 12px; color: var(--error); font-size: 13px; }
@media (hover: none), (pointer: coarse) { .doc-code-block { min-height: 56px; padding-right: 124px; } .doc-copy-code { height: 44px; opacity: 1; } }
.doc-code-label { color: var(--muted); font-size: 13px; font-weight: 600; }

/* Tabs */
.doc-code-tabs { margin: 20px 0; background: var(--code-bg); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; }
.doc-code-tabs > [role="tablist"] { display: flex; gap: 20px; padding: 0 20px; border-bottom: 1px solid var(--border); overflow-x: auto; }
.doc-code-tabs [role="tab"] { position: relative; display: block; min-height: 44px; padding: 10px 2px; border: 0; border-radius: 0; background: transparent; color: var(--muted); font-size: 14px; font-weight: 500; white-space: nowrap; }
.doc-code-tabs [role="tab"]:hover { color: var(--ink); background: transparent; }
.doc-code-tabs [role="tab"][aria-selected="true"] { color: var(--ink); box-shadow: inset 0 -2px var(--primary); }
.doc-code-tabs [role="tab"] span { font-size: 12px; }
.doc-code-tabs [role="tabpanel"] { padding: 4px 20px 12px; }
.doc-code-tabs [role="tabpanel"][hidden] { display: none; }
.doc-code-tabs .doc-code-block { margin: 0; border: 0; border-radius: 0; background: transparent; }

/* Tables */
.doc-table-wrap { overflow-x: auto; margin: 0 0 24px; border: 1px solid var(--border); border-radius: var(--r-lg); }
.doc-api-table { width: 100%; min-width: 720px; border-collapse: collapse; font-size: 14px; }
.doc-api-table th, .doc-api-table td { padding: 10px 14px; border: 0; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
.doc-api-table tr:last-child td { border-bottom: 0; }
.doc-api-table th { background: var(--canvas-soft); color: var(--ink); font-size: 13px; font-weight: 600; white-space: nowrap; }
.doc-api-table td:first-child { white-space: nowrap; }

/* Cards and callouts */
.doc-hub-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(205px, 1fr)); gap: 14px; margin: 20px 0; }
.doc-hub-card { display: block; min-height: 130px; padding: 20px; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface-card); color: inherit; text-decoration: none; transition: border-color .15s var(--ease); }
.doc-hub-card:hover { border-color: var(--hairline-strong); transform: none; }
.doc-hub-card i { color: var(--primary-text); font-size: 1.25rem; }
.doc-hub-card h4 { margin: 12px 0 6px; font-size: 16px; }
.doc-hub-card p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.5; }
.model-callout, .doc-model-card { margin: 20px 0; padding: 14px 16px 14px 18px; border: 1px solid var(--border); border-left: 3px solid var(--info); border-radius: var(--r-md); background: var(--surface-card); }
.model-callout.warning { border-left-color: var(--warning); background: var(--surface-card); }
.model-callout > :last-child, .doc-model-card > :last-child { margin-bottom: 0; }
.doc-model-card h4 { margin-top: 8px; }
.doc-model-card .header-action-button { margin-top: 14px; }
.model-example-links, .doc-next-links { display: flex; flex-wrap: wrap; gap: 9px; margin: 18px 0; }
.model-example-links a, .doc-next-links a { text-decoration: none; }
.ai-prompt-block + .ai-prompt-block { margin-top: 22px; }
.ai-prompt-block pre { max-height: 460px; margin: 12px 0; padding: 18px 20px; background: var(--code-bg); color: var(--code-text); border: 1px solid var(--border); border-radius: var(--r-lg); font-size: 13px; line-height: 1.6; }
.ai-copy-prompt { margin-right: 10px; }
.ai-copy-status { display: inline-block; min-height: 1.4em; }

/* Buttons (links and buttons inside the content) */
.plugin-doc-page :is(.header-action-button, button.small) { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; height: auto; padding: 10px 18px; border: 1px solid transparent; border-radius: var(--r-md); background: var(--primary); color: var(--on-primary); font-size: 14px; font-weight: 500; line-height: 1.2; text-decoration: none; white-space: normal; cursor: pointer; transition: background-color .15s var(--ease), border-color .15s var(--ease); }
.plugin-doc-page :is(.header-action-button, button.small):hover:not(:disabled) { background: var(--primary-active); border-color: transparent; color: var(--on-primary); }
.plugin-doc-page button.small { min-height: 32px; padding: 6px 12px; font-size: 13px; }
.plugin-doc-page button.secondary { background: var(--surface-card); color: var(--ink); border-color: var(--hairline-strong); }
.plugin-doc-page button.secondary:hover:not(:disabled) { background: var(--surface-hover); }

/* Downloads: .dl-btn (the file), .dl-card (file with context), .dl-link (supporting file in prose) */
body[data-plugin-doc-page] { --dl-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%203v12m-5-5%205%205%205-5M4%2016v5h16v-5%22%2F%3E%3C%2Fsvg%3E"); }
body[data-plugin-doc-page] .dl-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; box-sizing: border-box; min-height: 44px; padding: 0 14px; border: 1px solid var(--hairline-strong); border-radius: 8px; background: var(--surface-card); color: var(--ink); font-size: 14px; font-weight: 500; line-height: 1.2; text-decoration: none; white-space: nowrap; cursor: pointer; transition: border-color .15s var(--ease), background-color .15s var(--ease); }
body[data-plugin-doc-page] .dl-btn::before, body[data-plugin-doc-page] .dl-link::before { content: ""; flex: none; width: 16px; height: 16px; background: currentColor; -webkit-mask: var(--dl-icon) center / contain no-repeat; mask: var(--dl-icon) center / contain no-repeat; }
body[data-plugin-doc-page] .dl-btn:hover { border-color: var(--ink); color: var(--ink); }
body[data-plugin-doc-page] .dl-btn--primary { border-color: transparent; background: var(--primary); color: var(--on-primary); }
body[data-plugin-doc-page] .dl-btn--primary:hover { border-color: transparent; background: var(--primary-active); color: var(--on-primary); }
body[data-plugin-doc-page] .dl-btn:focus-visible, body[data-plugin-doc-page] .dl-link:focus-visible { outline: 2px solid var(--focus, var(--primary-focus)); outline-offset: 2px; }
body[data-plugin-doc-page] .dl-link { display: inline; color: var(--ink); text-decoration: underline; text-decoration-color: var(--hairline-strong); text-underline-offset: 3px; }
body[data-plugin-doc-page] .dl-link::before { display: inline-block; width: 14px; height: 14px; margin-right: 6px; vertical-align: -2px; }
body[data-plugin-doc-page] .dl-link:hover { text-decoration-color: var(--ink); }
body[data-plugin-doc-page] .dl-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 16px; padding: 0; list-style: none; }
body[data-plugin-doc-page] .dl-actions > li { margin: 0; padding: 0; }
body[data-plugin-doc-page] .dl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr)); gap: 16px; margin: 16px 0; }
body[data-plugin-doc-page] .dl-card { display: flex; flex-direction: column; gap: 10px; padding: 20px; border: 1px solid var(--hairline); border-radius: 12px; background: var(--surface-card); }
body[data-plugin-doc-page] .dl-card > * { margin: 0; }
body[data-plugin-doc-page] .dl-card .dl-btn { margin-top: auto; align-self: flex-start; }
body[data-plugin-doc-page] .dl-meta { color: var(--muted); font-size: 13px; line-height: 1.5; }
@media (pointer: coarse) { body[data-plugin-doc-page] .dl-btn { min-height: 44px; } }
@media (max-width: 480px) { body[data-plugin-doc-page] .dl-btn { white-space: normal; text-align: left; } }

/* Search */
.doc-search { position: relative; margin: 0; z-index: 5; width: 100%; }
.doc-search input { width: 100%; height: 40px; min-height: 40px; min-width: 0; padding: 8px 10px 8px 34px; border: 1px solid var(--hairline-strong); border-radius: var(--r-md); background: var(--surface-card); color: var(--ink); font-size: 14px; }
.doc-search input:focus { outline: none; border-color: var(--primary-focus); box-shadow: 0 0 0 3px var(--primary-soft); }
.doc-search-icon { position: absolute; top: 13px; left: 12px; font-size: 14px; color: var(--muted); pointer-events: none; }
.doc-search-popup { position: absolute; top: calc(100% + 6px); left: 0; width: 560px; max-width: calc(100vw - 2 * var(--gutter, 16px)); max-height: min(520px, 55vh); overflow-y: auto; overscroll-behavior: contain; border: 1px solid var(--hairline-strong); border-radius: var(--r-lg); background: var(--plugin-raised); box-shadow: none; scrollbar-width: thin; scrollbar-color: var(--hairline-strong) transparent; }
.doc-search-popup[hidden], .doc-search-popup p[hidden] { display: none; }
.doc-search-popup ul { margin: 0; padding: 4px; list-style: none; }
.doc-search-popup li { margin: 0; border-bottom: 1px solid var(--border); }
.doc-search-popup li:last-child { border-bottom: 0; }
.doc-search-popup a { display: grid; gap: 4px; padding: 12px; color: var(--ink); text-decoration: none; overflow-wrap: anywhere; }
.doc-search-popup li[aria-selected="true"], .doc-search-popup a:hover { background: var(--plugin-selected); box-shadow: inset 2px 0 var(--primary); border-radius: var(--r-xs); }
.doc-search-popup strong { font-size: 14px; line-height: 1.4; }
.doc-search-page { font-size: 12px; color: var(--muted); }
.doc-search-excerpt { font-size: 13px; line-height: 1.5; color: var(--body); }
.doc-search-popup mark { background: var(--primary-soft); color: var(--ink); border-radius: 2px; }
.doc-search-popup p { padding: 12px 16px; margin: 0; color: var(--muted); }
.doc-search-target { background: var(--primary-soft); outline: 2px solid var(--primary-focus); outline-offset: 5px; border-radius: var(--r-xs); }

/* Heading anchor links */
.doc-heading-link { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0; margin-left: 6px; border: 0; background: transparent; color: var(--muted); opacity: 0; vertical-align: middle; }
.doc-heading-link:hover:not(:disabled) { background: transparent; color: var(--ink); }
.plugin-doc-page :is(h3,h4):hover .doc-heading-link, .plugin-doc-page :is(h3,h4):focus-within .doc-heading-link { opacity: 1; }
@media (hover: none) { .doc-heading-link { opacity: 1; } }

/* Outline ("On this page") */
.doc-outline { position: sticky; top: var(--doc-top); align-self: start; margin: 0; padding: 40px 0; border: 0; font-size: 13px; }
.doc-outline > strong { display: block; margin: 0 0 12px; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.doc-outline nav { display: flex; flex-direction: column; border-left: 1px solid var(--border); }
.doc-outline a { display: block; margin-left: -1px; padding: 4px 0 4px 14px; border-left: 2px solid transparent; color: var(--muted); font-size: 13px; line-height: 1.45; text-decoration: none; overflow-wrap: anywhere; }
.doc-outline a:hover { color: var(--ink); }
.doc-outline a.is-active { color: var(--ink); border-left-color: var(--primary); }

/* Back to top */
.doc-back-to-top { position: fixed; right: max(20px, env(safe-area-inset-right)); bottom: max(20px, env(safe-area-inset-bottom)); z-index: 40; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border: 1px solid var(--hairline-strong); border-radius: var(--r-pill); background: var(--surface-card); color: var(--ink); box-shadow: none; }
.doc-back-to-top[hidden] { display: none; }
.doc-back-to-top:hover:not(:disabled) { background: var(--surface-hover); color: var(--primary-text); border-color: var(--hairline-strong); }

/* Menu toggle (mobile drawer trigger) */
.doc-nav-toggle { display: none; }

@media (max-width: 1279px) {
  .plugin-doc-layout { --rail-w: 248px; grid-template-columns: var(--rail-w) minmax(0, 1fr); }
  .doc-outline { display: none; }
}
@media (max-width: 919px) {
  .plugin-doc-layout { display: block; padding: 0 var(--gutter, 16px); background: none; }
  .doc-nav-toggle { display: inline-flex; align-items: center; gap: 8px; width: auto; min-height: 36px; margin: 16px 0 0; padding: 6px 12px; border: 1px solid var(--hairline-strong); border-radius: var(--r-md); background: var(--surface-card); color: var(--ink); font-size: 14px; font-weight: 500; }
  .doc-nav-toggle:hover:not(:disabled) { background: var(--surface-hover); }
  .plugin-doc-toc {
    position: fixed; z-index: 60; top: var(--doc-top); left: 0; bottom: auto; width: min(320px, 86vw); height: calc(100dvh - var(--doc-top)); max-height: none;
    padding: 20px; background: var(--canvas); border-right: 1px solid var(--hairline-strong); overflow: auto; overscroll-behavior: contain;
    visibility: hidden; transform: translateX(-100%); transition: transform .2s var(--ease), visibility 0s linear .2s;
  }
  .plugin-doc-toc.is-open { visibility: visible; transform: none; transition: transform .2s var(--ease); }
  .plugin-doc-page { max-width: 760px; padding: 28px 0 64px; }
  .doc-search input { height: 44px; font-size: 16px; }
  .doc-search-icon { top: 15px; }
  .doc-search-popup { width: 100%; max-height: 50dvh; }
  .doc-copy-code { height: 44px; top: 8px; }
}
@media (max-width: 600px) {
  .doc-page-heading .inline-actions { flex-wrap: wrap; }
  .doc-search-popup a { padding: 10px; }
}
@media (max-width: 480px) { .plugin-doc-page .doc-code-block pre { padding: 16px 14px; } .doc-code-block { padding-right: 112px; } .doc-copy-code { width: 102px; right: 6px; } }
@media (prefers-reduced-motion: reduce) { .doc-copy-code, .plugin-doc-toc, .doc-hub-card { transition: none; } }