/* kyvexdev.com/docs: GitBook-style layout. Sidebar tree | page | "On this page". Brand tokens from style.css. */

.dx { display: grid; grid-template-columns: 280px minmax(0, 1fr) 230px; max-width: 1440px; margin: 0 auto; min-height: calc(100vh - 64px); }
.dx .i, .dx-i { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: square; stroke-linejoin: miter; }

/* Sidebar */
.dx-side { position: sticky; top: 64px; height: calc(100vh - 64px); overflow-y: auto; padding: 20px 14px 28px; border-right: 1px solid var(--divider); scrollbar-width: thin; scrollbar-color: var(--strong) transparent; }
.dx-side-top { display: grid; gap: 10px; margin-bottom: 18px; }
.dx-space-pick { position: relative; }
.dx-space-btn { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; background: var(--panel); border: 1px solid var(--border); border-radius: 10px; color: var(--text); font: 600 14px 'Sora', sans-serif; cursor: pointer; text-align: left; }
.dx-space-btn:hover { border-color: var(--strong); }
.dx-space-btn > .i { margin-left: auto; color: var(--muted); }
.dx-space-ic { display: grid; place-items: center; width: 28px; height: 28px; flex: none; border: 1px solid var(--border); border-radius: 8px; background: var(--inset); }
.dx-space-ic .kmark { width: 12px; height: 13px; }
.dx-space-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dx-wm { font-weight: 700; } .dx-wm span { color: var(--accent); }
.dx-space-menu { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 15; display: grid; gap: 2px; padding: 6px; background: var(--panel); border: 1px solid var(--strong); border-radius: 12px; max-height: 60vh; overflow: auto; }
.dx-space-item { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 8px; font-size: 14px; color: var(--muted); }
.dx-space-item:hover, .dx-space-item.is-on { background: var(--raised); color: var(--text); }
.dx-version { display: flex; align-items: center; gap: 10px; padding: 0 2px; }
.dx-version span { font-size: 10px; color: var(--muted); }
.dx-version select { flex: 1; padding: 6px 8px; background: var(--inset); border: 1px solid var(--border); border-radius: 8px; color: var(--text); font: 500 13px 'Sora', sans-serif; }
.dx-search-btn { display: flex; align-items: center; gap: 10px; padding: 8px 10px; background: var(--inset); border: 1px solid var(--border); border-radius: 10px; color: var(--muted); font: 400 14px 'Sora', sans-serif; cursor: pointer; }
.dx-search-btn:hover { border-color: var(--strong); color: var(--text); }
.dx-search-btn .i { width: 15px; height: 15px; }
.dx-search-btn kbd, .dx-home-search kbd, .dx-search-input kbd { margin-left: auto; padding: 2px 6px; font-size: 9px; color: var(--muted); border: 1px solid var(--border); border-radius: 5px; background: var(--panel); }
.dx-snap-note { margin: -6px 2px 14px; padding: 8px 10px; font-size: 12px; color: var(--muted); border: 1px solid var(--border); border-radius: 8px; }
.dx-snap-note a { color: var(--text); text-decoration: underline; text-decoration-color: var(--accent); }

.dx-tree { display: grid; gap: 1px; }
.dx-group { margin-top: 16px; }
.dx-group-title { display: flex; align-items: center; gap: 6px; padding: 4px 8px 6px; font-size: 10px; color: var(--muted); text-transform: uppercase; }
.dx-link { position: relative; display: flex; align-items: center; gap: 4px; padding: 6px 8px 6px calc(8px + var(--d, 0) * 14px); border-radius: 8px; font-size: 14px; color: var(--muted); line-height: 1.35; }
.dx-link:hover { background: var(--panel); color: var(--text); }
.dx-link.is-on { background: var(--raised); color: var(--text); font-weight: 600; box-shadow: inset 2px 0 0 var(--accent); }
.dx-link-text { min-width: 0; flex: 1; }
.dx-caret, .dx-caret-gap { display: grid; place-items: center; width: 16px; height: 16px; flex: none; color: var(--muted); }
.dx-caret .i { width: 13px; height: 13px; transition: transform .15s; }
.dx-node.is-open > .dx-link .dx-caret .i { transform: rotate(90deg); }
.dx-kids { display: none; }
.dx-node.is-open > .dx-kids { display: grid; gap: 1px; }
.dx-flag { padding: 1px 5px; font: 700 9px 'JetBrains Mono', monospace; letter-spacing: .1em; color: var(--warning); border: 1px solid #4a3a12; border-radius: 4px; }
.dx-flag.is-edit { color: var(--accent); border-color: #164e5a; }
.dx-flag.is-auto { color: var(--muted); border-color: var(--border); }
.dx-lock { display: inline-grid; color: var(--muted); } .dx-lock .i { width: 12px; height: 12px; }
.dx-more { display: none; margin-left: auto; padding: 2px; background: none; border: 0; color: var(--muted); cursor: pointer; border-radius: 6px; }
.dx-more:hover { color: var(--text); background: var(--strong); }
.dx-link:hover .dx-more, .dx-group-title:hover .dx-more { display: grid; }
.dx-side-tools { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--divider); }
[data-drag] { cursor: grab; }
.is-dragging { opacity: .4; }
.is-drop-before > .dx-link, .is-drop-before > .dx-group-title { box-shadow: inset 0 2px 0 var(--accent); }
.is-drop-after > .dx-link, .is-drop-after > .dx-group-title { box-shadow: inset 0 -2px 0 var(--accent); }
.is-drop-inside > .dx-link, .is-drop-inside > .dx-group-title { outline: 1px dashed var(--accent); outline-offset: -1px; }

/* Page */
.dx-main { min-width: 0; padding: 36px 56px 80px; }
.dx-article { max-width: 780px; margin: 0 auto; }
.dx-crumbs { display: flex; flex-wrap: wrap; gap: 8px; font-size: 10px; color: var(--muted); margin-bottom: 14px; }
.dx-crumbs a:hover { color: var(--text); }
.dx-title-row { display: flex; align-items: flex-start; gap: 16px; }
.dx-title-row h1 { flex: 1; font-size: 40px; line-height: 1.12; letter-spacing: -.02em; font-weight: 700; }
.dx-edit-btn { margin-top: 6px; }
.dx-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.dx-meta:empty { display: none; }
.dx-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px; font-size: 10px; color: var(--muted); border: 1px solid var(--border); border-radius: 6px; }
.dx-chip .i { width: 12px; height: 12px; }
.dx-prose { margin-top: 30px; }
.dx-prose h2, .dx-prose h3, .dx-prose h4 { scroll-margin-top: 90px; }
.dx-prose h2 { padding-top: 10px; font-size: 24px; }
.dx-h { position: relative; }
.dx-anchor { margin-left: 8px; color: var(--muted); opacity: 0; text-decoration: none !important; vertical-align: middle; }
.dx-h:hover .dx-anchor { opacity: 1; }
.dx-anchor .dx-i { width: 15px; height: 15px; }
.dx-loading { display: flex; gap: 6px; padding: 40px 0; }
.dx-loading span { width: 8px; height: 8px; background: var(--strong); border-radius: 2px; animation: blink 1s infinite; }
.dx-loading span:nth-child(2) { animation-delay: .15s; } .dx-loading span:nth-child(3) { animation-delay: .3s; }
.dx-empty { padding: 40px 0; }
.dx-404 { max-width: 640px; margin: 0 auto; padding: 80px 24px; display: grid; gap: 14px; justify-items: start; }

/* Blocks */
.dx-prose mark, .dx-hit mark { background: rgba(34, 211, 238, .18); color: var(--text); border-radius: 3px; padding: 0; }
.dx-check { list-style: none; padding-left: 0 !important; }
.dx-check li { display: flex; gap: 10px; align-items: flex-start; }
.dx-box { display: grid; place-items: center; width: 18px; height: 18px; margin-top: 4px; flex: none; border: 1px solid var(--strong); border-radius: 5px; }
.dx-box svg { width: 12px; height: 12px; fill: none; stroke: var(--accent); stroke-width: 3; }
.dx-check li.is-done > span:last-of-type { color: var(--muted); text-decoration: line-through; }
.dx-table { overflow-x: auto; margin: 0 0 1.2em; }
.dx-table table { margin: 0; }
.dx-table th { background: var(--panel); color: var(--text); font-weight: 600; }
.dx-figure { margin: 0 0 1.4em; }
.dx-figure img { display: block; cursor: zoom-in; margin: 0 auto; }
.dx-figure.is-framed { padding: 14px; background: var(--panel); border: 1px solid var(--border); border-radius: 14px; }
.dx-figure.is-framed img { border: 0; }
.dx-figure figcaption, .dx-video figcaption { margin-top: 8px; font-size: 13px; color: var(--muted); text-align: center; }
.dx-zoom { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 32px; background: rgba(0, 0, 0, .92); cursor: zoom-out; animation: fade .15s both; }
.dx-zoom img { max-width: 100%; max-height: 100%; border-radius: 10px; }
.dx-callout { display: flex; gap: 12px; margin: 0 0 1.2em; padding: 14px 16px; background: var(--panel); border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: 0 12px 12px 0; }
.dx-callout > .dx-i { width: 18px; height: 18px; margin-top: 3px; color: var(--accent); }
.dx-callout-title { display: block; color: var(--text); font-weight: 600; margin-bottom: 2px; }
.dx-callout-body { color: #cfcfcf; }
.dx-callout.is-tip { border-left-color: var(--success); } .dx-callout.is-tip > .dx-i { color: var(--success); }
.dx-callout.is-warning { border-left-color: var(--warning); } .dx-callout.is-warning > .dx-i { color: var(--warning); }
.dx-callout.is-danger { border-left-color: var(--danger); } .dx-callout.is-danger > .dx-i { color: var(--danger); }
.dx-tabs { margin: 0 0 1.2em; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: var(--inset); }
.dx-tab-row { display: flex; gap: 2px; padding: 6px 6px 0; border-bottom: 1px solid var(--border); background: var(--panel); overflow-x: auto; }
.dx-tab { padding: 8px 14px; background: none; border: 0; border-bottom: 2px solid transparent; color: var(--muted); font: 600 13px 'Sora', sans-serif; cursor: pointer; white-space: nowrap; }
.dx-tab:hover { color: var(--text); }
.dx-tab.is-on { color: var(--text); border-bottom-color: var(--accent); }
.dx-tab-panel { padding: 14px 16px; }
.dx-tab-panel > :last-child, .dx-tab-panel .code-box { margin-bottom: 0; }
.dx-tab-panel .code-box { border: 0; border-radius: 0; margin: -14px -16px; }
.dx-steps { list-style: none; counter-reset: step; padding-left: 0 !important; margin: 0 0 1.4em; }
.dx-steps > li { position: relative; counter-increment: step; padding: 0 0 22px 46px; margin: 0; }
.dx-steps > li::before { content: counter(step); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 28px; height: 28px; font: 700 12px 'JetBrains Mono', monospace; color: var(--text); background: var(--panel); border: 1px solid var(--strong); border-radius: 8px; }
.dx-steps > li::after { content: ''; position: absolute; left: 14px; top: 34px; bottom: 4px; width: 1px; background: var(--border); }
.dx-steps > li:last-child::after { display: none; }
.dx-steps > li > strong { display: block; padding-top: 2px; color: var(--text); }
.dx-steps > li > div { margin-top: 4px; }
.dx-steps .code-box { margin: 10px 0 0; }
.dx-expand { margin: 0 0 10px; border: 1px solid var(--border); border-radius: 12px; background: var(--panel); }
.dx-expand summary { display: flex; align-items: center; gap: 10px; padding: 12px 16px; cursor: pointer; list-style: none; font-weight: 600; color: var(--text); }
.dx-expand summary::-webkit-details-marker { display: none; }
.dx-expand summary .dx-i, .dx-expand summary .i { transition: transform .15s; color: var(--muted); }
.dx-expand[open] summary .dx-i, .dx-expand[open] summary .i { transform: rotate(90deg); }
.dx-expand-body { padding: 0 16px 14px 42px; color: #cfcfcf; }
.dx-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin: 0 0 1.4em; }
.dx-card { position: relative; display: grid; gap: 4px; padding: 16px 40px 16px 16px; background: var(--panel); border: 1px solid var(--border); border-radius: 12px; text-decoration: none !important; transition: border-color .15s; }
.dx-card:hover { border-color: var(--strong); }
.dx-card strong { color: var(--text); font-weight: 600; }
.dx-card span { font-size: 14px; color: var(--muted); }
.dx-card > .dx-i, .dx-card > .i { position: absolute; right: 14px; top: 18px; color: var(--muted); }
.dx-card:hover > .dx-i, .dx-card:hover > .i { color: var(--accent); }
.dx-video { margin: 0 0 1.4em; }
.dx-video iframe, .dx-video video { display: block; width: 100%; aspect-ratio: 16 / 9; border: 1px solid var(--border); border-radius: 12px; background: var(--inset); }
.dx-file { display: flex; align-items: center; gap: 14px; margin: 0 0 1.2em; padding: 14px 16px; background: var(--panel); border: 1px solid var(--border); border-radius: 12px; text-decoration: none !important; }
.dx-file:hover { border-color: var(--strong); }
.dx-file > span { flex: 1; display: grid; }
.dx-file strong { color: var(--text); }
.dx-file small { color: var(--muted); font-size: 13px; }
.dx-file > .dx-i { width: 20px; height: 20px; color: var(--muted); }
.dx-locked { display: grid; gap: 10px; justify-items: start; padding: 28px; background: var(--panel); border: 1px solid var(--border); border-radius: 14px; }
.dx-locked > .i { width: 22px; height: 22px; color: var(--accent); }
.dx-locked h2 { margin: 0 !important; padding: 0 !important; }
.dx-locked-actions { display: flex; gap: 10px; margin-top: 6px; }

/* Page footer */
.dx-foot { margin-top: 48px; padding-top: 22px; border-top: 1px solid var(--divider); display: grid; gap: 22px; }
.dx-updated { font-size: 10px; color: var(--muted); }
.dx-feedback { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; color: var(--muted); font-size: 14px; }
.dx-feedback .i { width: 15px; height: 15px; }
.dx-feedback-form { display: grid; gap: 10px; width: 100%; }
.dx-feedback-form label { display: grid; gap: 8px; color: var(--text); }
.dx-feedback-form textarea { width: 100%; padding: 10px 12px; background: var(--inset); border: 1px solid var(--border); border-radius: 10px; color: var(--text); font: 400 14px 'Sora', sans-serif; resize: vertical; }
.dx-pn { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.dx-pn a { display: grid; gap: 4px; padding: 14px 16px; border: 1px solid var(--border); border-radius: 12px; transition: border-color .15s; }
.dx-pn a:hover { border-color: var(--strong); }
.dx-pn span { font-size: 10px; color: var(--muted); }
.dx-pn strong { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.dx-pn .dx-pn-next { text-align: right; grid-column: 2; }
.dx-pn .dx-pn-next strong { justify-content: flex-end; }
.dx-pn .i { width: 15px; height: 15px; }

/* On this page */
.dx-toc { position: sticky; top: 64px; height: calc(100vh - 64px); overflow-y: auto; padding: 40px 20px 28px 10px; }
.dx-toc-label { font-size: 10px; color: var(--muted); margin-bottom: 10px; }
.dx-toc nav { display: grid; gap: 2px; border-left: 1px solid var(--divider); }
.dx-toc a { margin-left: -1px; padding: 4px 0 4px 12px; border-left: 1px solid transparent; font-size: 13px; color: var(--muted); line-height: 1.4; }
.dx-toc a.lv3 { padding-left: 24px; }
.dx-toc a:hover { color: var(--text); }
.dx-toc a.is-on { color: var(--text); border-left-color: var(--accent); }

/* Home */
.dx-home { padding: 72px 0 96px; background: var(--dots) 0 0 / 24px 24px; background-repeat: repeat-x; background-size: 24px 24px; }
.dx-home h1 { margin-top: 12px; font-size: 48px; line-height: 1.05; letter-spacing: -.02em; }
.dx-home .lede { margin-top: 14px; }
.dx-home-search { display: flex; align-items: center; gap: 12px; width: min(560px, 100%); margin-top: 28px; padding: 14px 16px; background: var(--panel); border: 1px solid var(--strong); border-radius: 12px; color: var(--muted); font: 400 16px 'Sora', sans-serif; cursor: pointer; }
.dx-home-search:hover { border-color: #4a4a4a; color: var(--text); }
.dx-home-search .i { width: 18px; height: 18px; }
.dx-home-tools { display: flex; gap: 8px; margin-top: 16px; }
.dx-home-h { margin: 48px 0 14px; font-size: 11px; color: var(--muted); }
.dx-spaces { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.dx-space-card { display: grid; gap: 6px; align-content: start; padding: 18px; background: var(--panel); border: 1px solid var(--border); border-radius: 14px; transition: border-color .15s; }
.dx-space-card:hover { border-color: var(--strong); }
.dx-space-card img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 9px; border: 1px solid var(--border); margin-bottom: 8px; }
.dx-space-card strong { font-size: 17px; }
.dx-space-card > span:not(.dx-space-ic):not(.dx-flag) { font-size: 14px; color: var(--muted); }
.dx-space-card .dx-space-ic { margin-bottom: 6px; }
.dx-space-card .dx-flag { justify-self: start; }

/* Search */
.dx-search { position: fixed; inset: 0; z-index: 90; display: grid; justify-items: center; align-items: start; padding: 10vh 16px 16px; background: rgba(0, 0, 0, .75); animation: fade .12s both; }
.dx-search-panel { width: min(680px, 100%); max-height: 76vh; display: grid; grid-template-rows: auto auto minmax(0, 1fr); background: var(--panel); border: 1px solid var(--strong); border-radius: 14px; overflow: hidden; }
.dx-search-input { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--border); color: var(--muted); }
.dx-search-input .i { width: 18px; height: 18px; }
.dx-search-input input { flex: 1; min-width: 0; background: none; border: 0; outline: 0; color: var(--text); font: 400 17px 'Sora', sans-serif; }
.dx-search-input input::-webkit-search-cancel-button { display: none; }
.dx-search-scope { display: flex; gap: 6px; padding: 8px 12px; border-bottom: 1px solid var(--divider); }
.dx-search-scope button { padding: 4px 10px; background: none; border: 1px solid var(--border); border-radius: 999px; color: var(--muted); font: 500 12px 'Sora', sans-serif; cursor: pointer; }
.dx-search-scope button.is-on { color: #000; background: var(--accent); border-color: var(--accent); }
.dx-search-results { overflow-y: auto; padding: 6px; }
.dx-search-hint { padding: 18px 12px; font-size: 14px; }
.dx-hit { display: grid; gap: 3px; padding: 10px 12px; border-radius: 9px; }
.dx-hit.is-on, .dx-hit:hover { background: var(--raised); }
.dx-hit-space { font-size: 9px; color: var(--muted); }
.dx-hit strong { font-weight: 600; font-size: 15px; }
.dx-hit-text { font-size: 13px; color: var(--muted); line-height: 1.5; }

/* Mobile */
.dx-side-toggle { display: none; }
.dx-scrim { display: none; }
@media (max-width: 1180px) {
  .dx { grid-template-columns: 260px minmax(0, 1fr); }
  .dx-toc { display: none; }
  .dx-main { padding: 32px 36px 72px; }
}
@media (max-width: 860px) {
  .dx { display: block; }
  .dx-side { position: fixed; left: 0; top: 64px; bottom: 0; z-index: 40; width: min(320px, 86vw); height: auto; background: var(--bg); transform: translateX(-102%); transition: transform .2s var(--ease); }
  body.dx-side-open .dx-side { transform: none; }
  body.dx-side-open .dx-scrim { display: block; position: fixed; inset: 64px 0 0; z-index: 39; background: rgba(0, 0, 0, .6); }
  .dx-side-toggle { position: fixed; left: 16px; bottom: 16px; z-index: 41; display: flex; align-items: center; gap: 8px; padding: 10px 14px; background: var(--panel); border: 1px solid var(--strong); border-radius: 999px; color: var(--text); font: 600 14px 'Sora', sans-serif; }
  .dx-side-toggle .i { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; }
  .dx-main { padding: 24px 16px 96px; }
  .dx-title-row h1 { font-size: 30px; }
  .dx-pn { grid-template-columns: 1fr; }
  .dx-pn .dx-pn-next { grid-column: 1; }
  .dx-home h1 { font-size: 34px; }
}
body:not(:has(.dx)) .dx-side-toggle { display: none !important; }

/* ---------------------------------------------------------------------------------------------- */
/* Editing (edit.js) */

.dxe-bar { position: sticky; top: 64px; z-index: 12; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: -36px -56px 24px; padding: 12px 56px; background: rgba(0, 0, 0, .9); backdrop-filter: blur(10px); border-bottom: 1px solid var(--divider); }
.dxe-status { font-size: 10px; color: var(--muted); }
.dxe-grow { flex: 1; }
.dxe { max-width: 820px; margin: 0 auto; }
.dxe-title { width: 100%; padding: 0; background: none; border: 0; outline: 0; color: var(--text); font: 700 40px/1.15 'Sora', sans-serif; letter-spacing: -.02em; }
.dxe-holder { margin-top: 18px; min-height: 50vh; color: #cfcfcf; font-size: 16px; line-height: 1.7; }
.dxe-holder-sm { min-height: 220px; padding: 10px 14px 10px 46px; border: 1px solid var(--border); border-radius: 12px; background: var(--inset); }
.dxe-help { margin-top: 30px; font-size: 13px; }
.dxe-help kbd, .dxe-help code { font-family: 'JetBrains Mono', monospace; font-size: 11px; padding: 1px 5px; border: 1px solid var(--border); border-radius: 4px; background: var(--inset); }

/* Editor.js in the dark theme */
.dxe-holder .ce-block__content, .dxe-holder .ce-toolbar__content { max-width: none; }
.dxe-holder .ce-paragraph[data-placeholder]:empty::before, .dxe-holder .ce-paragraph[data-placeholder-active]:empty::before { color: #5c5c5c; }
.dxe-holder .ce-header { padding: .4em 0 .2em; color: var(--text); font-weight: 700; }
.dxe-holder h2.ce-header { font-size: 24px; } .dxe-holder h3.ce-header { font-size: 19px; } .dxe-holder h4.ce-header { font-size: 16px; }
.ce-toolbar__plus, .ce-toolbar__settings-btn { color: var(--muted); background: transparent; border-radius: 6px; }
.ce-toolbar__plus:hover, .ce-toolbar__settings-btn:hover { color: var(--text); background: var(--raised); }
.ce-popover, .ce-popover__container, .ce-inline-toolbar, .ce-conversion-toolbar, .ce-settings { background: var(--panel) !important; border: 1px solid var(--strong) !important; box-shadow: none !important; color: var(--text) !important; border-radius: 12px !important; }
.ce-popover-item, .ce-popover-item__title { color: var(--text) !important; }
.ce-popover-item:hover:not(.ce-popover-item--no-hover), .ce-popover-item--focused { background: var(--raised) !important; }
.ce-popover-item__icon { background: var(--inset) !important; border: 1px solid var(--border); box-shadow: none !important; color: var(--text); }
.ce-popover__search, .cdx-search-field { background: var(--inset) !important; border: 1px solid var(--border) !important; }
.cdx-search-field__input { color: var(--text) !important; }
.ce-popover-item-separator__line { background: var(--border) !important; }
.ce-inline-tool, .ce-inline-toolbar__dropdown { color: var(--text) !important; }
.ce-inline-tool:hover, .ce-inline-toolbar__dropdown:hover { background: var(--raised) !important; }
.ce-inline-tool-input { background: var(--inset) !important; color: var(--text) !important; border-color: var(--border) !important; }
.ce-block--selected .ce-block__content { background: rgba(34, 211, 238, .08); }
.ce-block--drop-target .ce-block__content::before { border-color: var(--accent); } .ce-block--drop-target .ce-block__content::after { background: var(--accent); }
.cdx-block { color: inherit; }
.cdx-list__item, .cdx-list { color: inherit; }
.cdx-checklist__item-checkbox-check, .cdx-list__checkbox-check { border-color: var(--strong) !important; background: var(--inset) !important; }
.tc-wrap { --color-border: var(--border); --color-background-hover: var(--raised); --color-text-secondary: var(--muted); --color-background: var(--panel); }
.tc-table, .tc-row, .tc-cell { border-color: var(--border) !important; }
.tc-popover { background: var(--panel) !important; border-color: var(--strong) !important; }
.cdx-input, .image-tool__caption { background: var(--inset) !important; border: 1px solid var(--border) !important; color: var(--text) !important; box-shadow: none !important; border-radius: 8px !important; }
.image-tool__image { border-radius: 12px; }
.cdx-button { background: var(--panel) !important; border: 1px solid var(--border) !important; color: var(--text) !important; box-shadow: none !important; }
.ce-delimiter::before { color: var(--muted); }
.cdx-marker { background: rgba(34, 211, 238, .2); color: var(--text); padding: 0 2px; }
.inline-code { background: var(--inset); color: var(--text); border: 1px solid var(--border); border-radius: 5px; font-family: 'JetBrains Mono', monospace; font-size: .85em; }

/* Custom blocks while editing */
.dxe-block { display: grid; gap: 8px; margin: 6px 0 12px; padding: 12px; background: var(--panel); border: 1px solid var(--border); border-radius: 12px; }
.dxe-label { font: 700 10px 'JetBrains Mono', monospace; letter-spacing: .12em; color: var(--muted); }
.dxe-field { min-height: 1.6em; padding: 6px 8px; border-radius: 8px; outline: 0; color: var(--text); }
.dxe-field:focus { background: var(--inset); }
.dxe-field:empty::before { content: attr(data-placeholder); color: #5c5c5c; }
.dxe-strong { font-weight: 600; }
.dxe-input, .dxe-select { padding: 8px 10px; background: var(--inset); border: 1px solid var(--border); border-radius: 8px; color: var(--text); font: 400 14px 'Sora', sans-serif; outline: 0; min-width: 0; }
.dxe-input:focus, .dxe-select:focus { border-color: #4a4a4a; }
.dxe-select { justify-self: start; }
.dxe-code { width: 100%; padding: 12px 14px; background: var(--inset); border: 1px solid var(--border); border-radius: 10px; color: #d6d6d6; font: 500 13.5px/1.7 'JetBrains Mono', monospace; resize: vertical; outline: 0; tab-size: 4; }
.dxe-callout { border-left: 3px solid var(--accent); }
.dxe-callout.is-tip { border-left-color: var(--success); } .dxe-callout.is-warning { border-left-color: var(--warning); } .dxe-callout.is-danger { border-left-color: var(--danger); }
.dxe-row-list { display: grid; gap: 10px; }
.dxe-row { display: grid; gap: 6px; padding: 10px; border: 1px solid var(--divider); border-radius: 10px; background: var(--inset); }
.dxe-inline { display: flex; gap: 6px; }
.dxe-inline .dxe-input { flex: 1; }
.dxe-row-tools { display: flex; gap: 6px; justify-content: flex-end; }
.dxe-mini { justify-self: start; padding: 5px 10px; background: var(--raised); border: 1px solid var(--border); border-radius: 7px; color: var(--muted); font: 500 12px 'Sora', sans-serif; cursor: pointer; }
.dxe-mini:hover { color: var(--text); border-color: var(--strong); }
.dxe-snippet-preview { padding: 10px 12px; border: 1px dashed var(--strong); border-radius: 10px; font-size: 14px; }
.dxe-snippet-preview:empty { display: none; }
.dxe-slug { display: flex; align-items: center; gap: 0; }
.dxe-slug span { padding: 0 8px 0 0; font-size: 11px; color: var(--muted); white-space: nowrap; }
.dxe-slug input { flex: 1; }

/* History and snippets dialogs */
.dialog.dialog-wide { width: min(1080px, calc(100vw - 32px)); max-width: none; }
.dxe-history { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 16px; min-height: 60vh; }
.dxe-history-list, .dxe-snippet-list { display: grid; gap: 4px; align-content: start; max-height: 70vh; overflow-y: auto; }
.dxe-history-item { display: grid; gap: 2px; padding: 10px 12px; text-align: left; background: none; border: 1px solid transparent; border-radius: 10px; color: var(--text); font: 400 13px 'Sora', sans-serif; cursor: pointer; }
.dxe-history-item span { color: var(--muted); } .dxe-history-item em { color: var(--muted); font-style: normal; font-size: 12px; }
.dxe-history-item:hover { background: var(--raised); }
.dxe-history-item.is-on { border-color: var(--strong); background: var(--raised); }
.dxe-history-view { display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 12px; min-width: 0; }
.dxe-history-tabs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.dxe-history-tabs > button:not(.btn) { padding: 5px 12px; background: none; border: 1px solid var(--border); border-radius: 999px; color: var(--muted); font: 500 12px 'Sora', sans-serif; cursor: pointer; }
.dxe-history-tabs > button.is-on { color: var(--text); border-color: var(--strong); background: var(--raised); }
.dxe-history-body { max-height: 64vh; overflow-y: auto; padding: 16px 18px; border: 1px solid var(--border); border-radius: 12px; background: var(--inset); }
.dxe-diff { font: 500 13px/1.65 'JetBrains Mono', monospace; }
.dxe-diff div { padding: 0 8px; white-space: pre-wrap; }
.dxe-diff .is-del, .dxe-diff-key .is-del { background: rgba(248, 113, 113, .12); color: #f3b0b0; }
.dxe-diff .is-add, .dxe-diff-key .is-add { background: rgba(74, 222, 128, .12); color: #a7e9bd; }
.dxe-diff-key span { padding: 2px 8px; border-radius: 5px; font-size: 12px; }
@media (max-width: 860px) {
  .dxe-bar { margin: -24px -16px 18px; padding: 10px 16px; }
  .dxe-history { grid-template-columns: 1fr; }
}

/* 404.html serves /docs/<space>/<page>: show the docs instead of the not-found message. */
.docs-route { display: none; }
#docs.docs-route, html.is-docs .docs-route { display: block; }
html.is-docs .notfound-route, html.is-docs .product-route { display: none; }

/* Things hidden with the hidden attribute stay hidden, whatever their display. */
.dx [hidden], .dx-search [hidden], .dxe [hidden] { display: none !important; }
/* Buttons inside a page keep the button look, not the link look. */
.dx-prose .btn { text-decoration: none; }
.dx-prose .btn-primary { color: #000; }

/* Inline code and tables keep the docs look after the editor's own styles load. */
.dx-prose code.inline-code, .dxe-holder .inline-code, .dx-prose .inline-code { color: var(--text) !important; background: var(--inset) !important; border: 1px solid var(--border) !important; padding: 2px 6px !important; border-radius: 5px !important; font: 500 .85em 'JetBrains Mono', monospace !important; letter-spacing: 0 !important; }
.dxe-holder .tc-row--heading, .dxe-holder .tc-row--heading .tc-cell { background: var(--panel) !important; color: var(--text) !important; font-weight: 600; }
.dxe-holder .tc-cell { color: var(--text); }
.dx-version select, .dx-side-top > * { min-width: 0; }
.dxe-holder .tc-table--heading .tc-row:first-child, .dxe-holder .tc-table--heading .tc-row:first-child .tc-cell { background: var(--panel) !important; color: var(--text) !important; }

/* Narrow screens: tables and code scroll sideways instead of squeezing words. */
.dx-table th, .dx-table td { overflow-wrap: normal; word-break: normal; }
.dx-table th:first-child, .dx-table td:first-child { white-space: nowrap; }
.dx-article, .dx-prose, .dx-tabs, .dx-steps > li { min-width: 0; max-width: 100%; }
.dx-tab-panel { overflow-x: auto; }
.dx-chip.is-team { color: var(--accent); border-color: #164e5a; }
.dx-space-card .dx-flag .i { width: 10px; height: 10px; vertical-align: -1px; }