/* ============================================================
   DCx Global — Floating mini-TOC sidebar
   Shared styling for any page that wants a sticky right-edge
   scroll navigator. Desktop-only (≥1101px). Below that, the
   in-page navigation handles orientation instead.
   ============================================================ */
.dcx-toc {
  position: fixed;
  right: 22px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 90;
  display: flex; flex-direction: column;
  gap: 2px;
  padding: 14px 10px;
  background: rgba(15, 30, 54, 0.85);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid rgba(232, 146, 10, 0.18);
  border-radius: 10px;
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.35);
  opacity: 0; pointer-events: none;
  transition: opacity 0.35s ease;
}
.dcx-toc.is-visible { opacity: 1; pointer-events: auto; }
@media (max-width: 1100px) { .dcx-toc { display: none !important; } }

.dcx-toc-title {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px; letter-spacing: 0.24em;
  color: var(--gold-400, #f0a832); text-transform: uppercase;
  text-align: center; padding: 4px 0 8px;
  border-bottom: 1px solid rgba(232, 146, 10, 0.12);
  margin-bottom: 4px;
}

.dcx-toc-item {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 8px; background: transparent;
  border: 0; border-radius: 5px;
  cursor: pointer; width: 100%;
  transition: all 0.25s ease;
  text-decoration: none;
  color: rgba(246, 239, 224, 0.50);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; letter-spacing: 0.06em;
  text-transform: uppercase;
  overflow: hidden;
}
.dcx-toc-item:hover {
  background: rgba(232, 146, 10, 0.06);
  color: var(--cream, #f6efe0);
}
.dcx-toc-item.is-active {
  color: var(--gold-400, #f0a832);
  background: rgba(232, 146, 10, 0.10);
}

.dcx-toc-dot {
  flex-shrink: 0;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: rgba(246, 239, 224, 0.30);
  border: 1px solid rgba(232, 146, 10, 0.25);
  transition: all 0.3s ease;
  position: relative;
}
.dcx-toc-item:hover .dcx-toc-dot {
  background: var(--gold-400, #f0a832);
  border-color: var(--gold-500, #e8920a);
  transform: scale(1.15);
}
.dcx-toc-item.is-active .dcx-toc-dot {
  background: var(--gold-500, #e8920a);
  border-color: var(--gold-500, #e8920a);
  box-shadow: 0 0 12px rgba(232, 146, 10, 0.55);
  animation: dcxTocPulse 2.4s ease-in-out infinite;
}
@keyframes dcxTocPulse {
  0%, 100% { box-shadow: 0 0 12px rgba(232, 146, 10, 0.55); }
  50%      { box-shadow: 0 0 20px rgba(232, 146, 10, 0.85); }
}

.dcx-toc-emoji { font-size: 13px; flex-shrink: 0; line-height: 1; }
.dcx-toc-label {
  white-space: nowrap;
  max-width: 0;
  opacity: 0;
  transition: max-width 0.32s cubic-bezier(.2,.85,.25,1), opacity 0.2s ease;
  overflow: hidden;
}
.dcx-toc:hover .dcx-toc-label,
.dcx-toc:focus-within .dcx-toc-label,
.dcx-toc-item.is-active .dcx-toc-label {
  max-width: 220px;
  opacity: 1;
}

.dcx-toc-top {
  margin-top: 4px;
  padding-top: 6px;
  border-top: 1px solid rgba(232, 146, 10, 0.12);
  display: flex; justify-content: center;
}
.dcx-toc-top button {
  background: transparent; border: 1px solid rgba(232, 146, 10, 0.20);
  color: var(--gold-400, #f0a832); cursor: pointer;
  width: 34px; height: 34px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.2s ease;
  padding: 0;
}
.dcx-toc-top button:hover {
  background: var(--gold-500, #e8920a); color: var(--navy-950, #0b1628);
  border-color: var(--gold-500, #e8920a);
}
.dcx-toc-top svg { width: 14px; height: 14px; }