/* ── RTL Icon Direction Swaps ── */
[dir="rtl"] .ic-chevleft  { transform: scaleX(-1); }
[dir="rtl"] .ic-chevright { transform: scaleX(-1); }
[dir="rtl"] .slideshow__arrow--prev { order: 1; }
[dir="rtl"] .slideshow__arrow--next { order: -1; }

/* ── Topbar Icon Buttons (theme + RTL toggles) ── */
.topbar__icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%; border: none;
  background: transparent; color: var(--color-text); cursor: pointer;
  transition: background 0.15s, color 0.15s; padding: 0; flex-shrink: 0;
}
.topbar__icon-btn:hover { background: var(--color-bg-secondary); color: var(--color-link); }
.ic-moon, .ic-sun, .ic-rtl {
  display: inline-block; width: 16px; height: 16px; background: currentColor;
}
.ic-moon {
  -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg>');
  mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg>');
}
.ic-sun {
  -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg>');
  mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg>');
}
.ic-rtl {
  -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="21" y1="12" x2="3" y2="12"/><polyline points="7 6 3 12 7 18"/></svg>');
  mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="21" y1="12" x2="3" y2="12"/><polyline points="7 6 3 12 7 18"/></svg>');
}

/* ── Documentation Layout ── */
/* These rules override style.css global element styles for the doc shell */
:root {
  --doc-sidebar-w: 260px;
  --doc-sidebar-bg: var(--color-bg);
  --doc-main-bg:    var(--color-bg-secondary);
}

/* Skip-to-main link (visible on focus) */
.skip-link {
  position: absolute;
  top: -100px; left: 12px;
  z-index: 9999;
  padding: 10px 18px;
  background: var(--color-link);
  color: #fff !important;
  font-weight: 700;
  font-size: 0.9rem;
  border-radius: var(--border-radius);
  text-decoration: none;
  transition: top 0.15s;
}
.skip-link:focus {
  top: 12px;
  outline: 3px solid var(--color-text);
  outline-offset: 2px;
}

html, body { overflow: hidden !important; height: 100% !important; }
body {
  display: flex !important;
  overflow-x: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Leave room for the fixed topbar */
body.has-topbar {
  padding-top: 56px !important;
}

/* Sidebar */
.doc-sidebar {
  width: var(--doc-sidebar-w) !important;
  flex-shrink: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  background: var(--doc-sidebar-bg) !important;
  border-right: 1px solid var(--color-bg-secondary) !important;
  overflow: hidden !important;
  padding: 0 !important;
  margin: 0 !important;
}

.doc-sidebar__head {
  padding: 16px 18px 10px !important;
  border-bottom: 1px solid var(--color-bg-secondary) !important;
  flex-shrink: 0 !important;
  text-align: left !important;
}
.doc-sidebar__logo {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--color-text) !important;
  letter-spacing: -0.01em !important;
  margin-bottom: 12px !important;
  line-height: 1.4 !important;
}
.doc-sidebar__logo span { color: var(--color-link) !important; }

.doc-sidebar__theme {
  position: relative !important;
}
.doc-sidebar__theme select {
  width: 100% !important;
  max-width: none !important;
  padding: 7px 10px !important;
  border-radius: var(--border-radius) !important;
  border: 1px solid var(--color-bg-secondary) !important;
  background: var(--color-bg-secondary) !important;
  color: var(--color-text) !important;
  font-size: 13px !important;
  font-family: inherit !important;
  cursor: pointer !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  margin-bottom: 0 !important;
  display: block !important;
}

.doc-sidebar__nav {
  flex: 1 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 10px 0 !important;
  margin: 0 !important;
  display: block !important;
  align-items: initial !important;
  justify-content: initial !important;
  font-weight: normal !important;
}
.doc-sidebar__nav::-webkit-scrollbar { width: 4px !important; }
.doc-sidebar__nav::-webkit-scrollbar-track { background: transparent !important; }
.doc-sidebar__nav::-webkit-scrollbar-thumb { background: var(--color-bg-secondary) !important; border-radius: 2px !important; }

.doc-nav-group {
  margin-bottom: 6px !important;
}
.doc-nav-group__title {
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: var(--color-text-secondary) !important;
  padding: 8px 18px 4px !important;
  margin: 0 !important;
  width: auto !important;
}
.doc-nav-group a {
  display: block !important;
  padding: 6px 18px !important;
  font-size: 13px !important;
  color: var(--color-text) !important;
  text-decoration: none !important;
  transition: background 120ms, color 120ms !important;
  border-left: 3px solid transparent !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  margin: 0 !important;
}
.doc-nav-group a:hover {
  background: var(--color-bg-secondary) !important;
  color: var(--color-link) !important;
  text-decoration: none !important;
  filter: none !important;
}
.doc-nav-group a.active {
  color: var(--color-link) !important;
  border-left-color: var(--color-link) !important;
  background: color-mix(in srgb, var(--color-link) 6%, transparent) !important;
  font-weight: 600 !important;
}

/* Main — override global <main> padding/max-width from style.css */
.doc-main {
  flex: 1 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  background: var(--doc-main-bg) !important;
  min-width: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  max-width: none !important;
}
.doc-main::-webkit-scrollbar { width: 6px !important; }
.doc-main::-webkit-scrollbar-track { background: transparent !important; }
.doc-main::-webkit-scrollbar-thumb { background: var(--color-bg-secondary) !important; border-radius: 3px !important; }

.doc-section {
  padding: 32px 40px !important;
  border-bottom: 1px solid var(--color-bg-secondary) !important;
  display: block !important;
  flex-wrap: initial !important;
  justify-content: initial !important;
}
.doc-section__header {
  margin-bottom: 24px !important;
  padding-top: 0 !important;
  width: auto !important;
  text-align: left !important;
}
.doc-section__title {
  font-size: 22px !important;
  font-weight: 700 !important;
  color: var(--color-text) !important;
  margin-bottom: 6px !important;
  line-height: 1.3 !important;
  text-wrap: balance !important;
}
.doc-section__desc {
  font-size: 14px !important;
  color: var(--color-text-secondary) !important;
  line-height: 1.7 !important;
  max-width: 640px !important;
  margin: 0.5rem 0 !important;
  width: auto !important;
}
.doc-section__desc code {
  font-size: 12px !important;
  padding: 1px 6px !important;
}

.doc-demo {
  border: 1px solid var(--color-bg-secondary) !important;
  border-radius: var(--border-radius) !important;
  background: var(--color-bg) !important;
  overflow: hidden !important;
  box-shadow: none !important;
}
.doc-demo__stage {
  padding: 28px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 16px !important;
  min-height: 100px !important;
}
.doc-demo__stage--block { flex-direction: column !important; align-items: stretch !important; }
.doc-demo__stage--left  { justify-content: flex-start !important; }
.doc-demo__code {
  background: var(--color-bg-secondary) !important;
  padding: 14px 20px !important;
  border-top: 1px solid var(--color-bg-secondary) !important;
  font-family: 'Consolas', 'Courier New', monospace !important;
  font-size: 12px !important;
  line-height: 1.7 !important;
  color: var(--color-text-secondary) !important;
  white-space: pre-wrap !important;
  word-break: break-all !important;
  overflow-x: auto !important;
  margin: 0 !important;
  max-width: none !important;
  border-radius: 0 !important;
}
.doc-demo__code::-webkit-scrollbar { height: 4px !important; }
.doc-demo__code::-webkit-scrollbar-thumb { background: var(--color-text-secondary) !important; border-radius: 2px !important; }
.doc-demo__code .hl-tag   { color: var(--color-link) !important; }
.doc-demo__code .hl-attr  { color: var(--color-secondary) !important; }
.doc-demo__code .hl-val   { color: #e67e22 !important; }
.doc-demo__code .hl-cmt   { color: var(--color-text-secondary) !important; opacity: 0.6 !important; font-style: italic !important; }

/* Demo trigger buttons now use .btn component classes (buttons.css) — no overrides needed */

/* Tooltip demo */
.tooltip-demo-text {
  font-size: 15px;
  color: var(--color-text);
}

/* ── Demo icon via CSS mask (theme-aware, inherits color) ── */
.dd-icon, .a-icon, .ig-icon, .ib-icon, .st-icon, .ic {
  display: inline-block; width: 16px; height: 16px; vertical-align: middle; flex-shrink: 0;
  background-color: currentColor;
  -webkit-mask-size: contain; -webkit-mask-position: center; -webkit-mask-repeat: no-repeat;
          mask-size: contain;          mask-position: center;          mask-repeat: no-repeat;
}
.a-icon { width: 18px; height: 18px; }
.alert__close .a-icon { width: 14px; height: 14px; opacity: 0.6; }
.alert__close:hover .a-icon { opacity: 1; }

/* Individual icon masks — use -webkit-mask-image for broad compatibility */
.ic-edit   { -webkit-mask-image: url('components/icons/edit.svg');     mask-image: url('components/icons/edit.svg'); }
.ic-copy   { -webkit-mask-image: url('components/icons/copy.svg');     mask-image: url('components/icons/copy.svg'); }
.ic-down   { -webkit-mask-image: url('components/icons/download.svg'); mask-image: url('components/icons/download.svg'); }
.ic-trash  { -webkit-mask-image: url('components/icons/trash.svg');    mask-image: url('components/icons/trash.svg'); }
.ic-info   { -webkit-mask-image: url('components/icons/info.svg');     mask-image: url('components/icons/info.svg'); }
.ic-check  { -webkit-mask-image: url('components/icons/check.svg');    mask-image: url('components/icons/check.svg'); }
.ic-warn   { -webkit-mask-image: url('components/icons/warning.svg');  mask-image: url('components/icons/warning.svg'); }
.ic-error  { -webkit-mask-image: url('components/icons/x-circle.svg'); mask-image: url('components/icons/x-circle.svg'); }
.ic-close  { -webkit-mask-image: url('components/icons/x.svg');        mask-image: url('components/icons/x.svg'); }
.ic-mail   { -webkit-mask-image: url('components/icons/mail.svg');     mask-image: url('components/icons/mail.svg'); }
.ic-search { -webkit-mask-image: url('components/icons/search.svg');   mask-image: url('components/icons/search.svg'); }
.ic-star   { -webkit-mask-image: url('components/icons/star.svg');     mask-image: url('components/icons/star.svg'); }
.ic-star-f { -webkit-mask-image: url('components/icons/star-filled.svg'); mask-image: url('components/icons/star-filled.svg'); }
.ic-user   { -webkit-mask-image: url('components/icons/user.svg');     mask-image: url('components/icons/user.svg'); }
.ic-chevup { -webkit-mask-image: url('components/icons/chevron-up.svg');   mask-image: url('components/icons/chevron-up.svg'); }
.ic-chevdown { -webkit-mask-image: url('components/icons/chevron-down.svg'); mask-image: url('components/icons/chevron-down.svg'); }
.ic-chevleft  { -webkit-mask-image: url('components/icons/chevron-left.svg');  mask-image: url('components/icons/chevron-left.svg'); }
.ic-chevright { -webkit-mask-image: url('components/icons/chevron-right.svg'); mask-image: url('components/icons/chevron-right.svg'); }
.ic-play      { -webkit-mask-image: url('components/icons/play.svg');        mask-image: url('components/icons/play.svg'); }
.ic-pause     { -webkit-mask-image: url('components/icons/pause.svg');       mask-image: url('components/icons/pause.svg'); }
.ic-plus      { -webkit-mask-image: url('components/icons/plus.svg');        mask-image: url('components/icons/plus.svg'); }
.ic-minus     { -webkit-mask-image: url('components/icons/minus.svg');       mask-image: url('components/icons/minus.svg'); }
.ic-grip      { -webkit-mask-image: url('components/icons/grip.svg');        mask-image: url('components/icons/grip.svg'); }
.ic-dashboard { -webkit-mask-image: url('components/icons/dashboard.svg');   mask-image: url('components/icons/dashboard.svg'); }
.ic-eye       { -webkit-mask-image: url('components/icons/eye.svg');         mask-image: url('components/icons/eye.svg'); }
.ic-eye-off   { -webkit-mask-image: url('components/icons/eye-off.svg');     mask-image: url('components/icons/eye-off.svg'); }
.ic-download  { -webkit-mask-image: url('components/icons/download.svg');    mask-image: url('components/icons/download.svg'); }
.ic-menu      { -webkit-mask-image: url('components/icons/menu.svg');        mask-image: url('components/icons/menu.svg'); }
.ic-volume    { -webkit-mask-image: url('components/icons/volume.svg');      mask-image: url('components/icons/volume.svg'); }
.ic-calendar  { -webkit-mask-image: url('components/icons/calendar.svg');    mask-image: url('components/icons/calendar.svg'); }