/* ── Documentation Layout ──
   EXSA-specific demo page styles for showcase.php.
   Layout (html/body, sidebar) → handled by layout.css + sidebar.css
   This file covers: doc sections, demo blocks, theme picker, icons.
   ─────────────────────────────────────────── */

:root {
  --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 ;
  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;
}


.doc-sidebar__logo span { color: var(--color-link) ; }

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

/* ── Main content area ── */
.doc-main {
  background: var(--doc-main-bg) ;
  padding: 0 ;
  margin: 0 ;
  max-width: none ;
}
.doc-main::-webkit-scrollbar { width: 6px ; }
.doc-main::-webkit-scrollbar-track { background: transparent ; }
.doc-main::-webkit-scrollbar-thumb { background: var(--color-bg-secondary) ; border-radius: 3px ; }

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

.doc-demo {
  border: 1px solid var(--color-bg-secondary) ;
  border-radius: var(--border-radius) ;
  background: var(--color-bg) ;
  overflow: hidden ;
  box-shadow: none ;
}

/* Advanced color picker — dropdown must escape the demo frame */
.doc-demo:has(.ex-cp) {
  overflow: visible ;
}

/* Tooltip — bubble must escape the demo frame */
.doc-demo:has(.tooltip) {
  overflow: visible ;
}
.doc-demo__stage {
  padding: 28px ;
  display: flex ;
  align-items: center ;
  justify-content: center ;
  gap: 16px ;
  min-height: 100px ;
  flex-wrap: wrap ;
}
.doc-demo__stage--block { flex-direction: column ; align-items: stretch ; flex-wrap: nowrap ; }
.doc-demo__stage--left  { justify-content: flex-start ; }
.doc-demo__code {
  /* Code blocks now wrapped in .code-box component — styling handled by code-box.css */
  margin: 0 ;
  max-width: none ;
}

/* 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-specific icon variants (base .ic class now in components/icons.css) ── */
.dd-icon, .a-icon {
  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; }

/* Icon masks are now in components/icons.css — link that file to use any .ic-* class */