/* Shared, compact light/dark switch used across public CodexMy pages. */
.theme-toggle {
  position: relative;
  display: inline-grid;
  grid-template-columns: repeat(2, 1fr);
  align-items: center;
  width: 62px;
  height: 32px;
  padding: 3px;
  border: 1px solid rgba(38, 82, 142, .16);
  border-radius: 999px;
  background: rgba(255, 255, 255, .74);
  color: #567195;
  cursor: pointer;
  isolation: isolate;
  transition: border-color .25s cubic-bezier(.16, 1, .3, 1), background .25s cubic-bezier(.16, 1, .3, 1), color .25s cubic-bezier(.16, 1, .3, 1);
}

.theme-toggle::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 3px;
  left: 3px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #e8f1ff;
  box-shadow: inset 0 1px rgba(255, 255, 255, .85), 0 2px 7px rgba(28, 72, 137, .16);
  transition: transform .32s cubic-bezier(.16, 1, .3, 1), background .25s cubic-bezier(.16, 1, .3, 1);
}

.theme-toggle svg { position: relative; z-index: 1; width: 14px; height: 14px; justify-self: center; fill: none; stroke: currentColor; stroke-width: 1.8; }
.theme-toggle .theme-sun { color: #1268e8; }
.theme-toggle .theme-moon { color: #7890b2; }
.theme-toggle:hover { border-color: rgba(18, 104, 232, .42); color: #1268e8; }
.theme-toggle:active { transform: scale(.96); }
.theme-toggle:focus-visible { outline: 2px solid #1268e8; outline-offset: 3px; }

html[data-theme="dark"] .theme-toggle { border-color: rgba(185, 213, 255, .21); background: rgba(20, 40, 70, .78); color: #b7cae5; }
html[data-theme="dark"] .theme-toggle::before { transform: translateX(30px); background: #2a5c9b; box-shadow: inset 0 1px rgba(255, 255, 255, .19), 0 2px 8px rgba(0, 0, 0, .35); }
html[data-theme="dark"] .theme-toggle .theme-sun { color: #8da4c4; }
html[data-theme="dark"] .theme-toggle .theme-moon { color: #e1ecff; }

.nav-actions .theme-toggle { flex: 0 0 auto; }
.nav-inner .theme-toggle { margin-left: 10px; }
.page-theme-toggle { position: fixed; top: 18px; right: max(18px, calc((100vw - 1180px) / 2)); z-index: 30; }

/* The animated 3D pseudo-layer previously escaped the nav while scrolling. */
.brand-orbit,
.nav-brand-orbit,
.doc-brand-orbit,
.api-brand-mark {
  overflow: hidden !important;
  flex: 0 0 auto;
  isolation: isolate;
  animation: none !important;
}

.brand-orbit { width: 38px !important; height: 38px !important; }
.nav-brand-orbit { width: 36px !important; height: 36px !important; }
.doc-brand-orbit { width: 28px !important; height: 28px !important; }
.api-brand-mark { width: 36px !important; height: 36px !important; }

.brand-orbit::before,
.brand-orbit::after,
.nav-brand-orbit::before,
.nav-brand-orbit::after,
.doc-brand-orbit::before,
.doc-brand-orbit::after,
.api-brand-mark::before,
.api-brand-mark::after { display: none !important; }

.brand-orbit img,
.nav-brand-orbit img,
.doc-brand-orbit img,
.api-brand-mark img { transform: none !important; filter: none !important; }
.brand-orbit img,
.nav-brand-orbit img,
.doc-brand-orbit img,
.api-brand-mark img { display: block; width: 100% !important; height: 100% !important; object-fit: contain; }

@media (max-width: 680px) {
  .theme-toggle { width: 58px; height: 30px; }
  .theme-toggle::before { width: 22px; height: 22px; }
  html[data-theme="dark"] .theme-toggle::before { transform: translateX(28px); }
  .page-theme-toggle { top: 14px; right: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .theme-toggle,
  .theme-toggle::before { transition: none; }
}