.app-nav nav #webcodex-enroll-link { text-decoration: none; }
.app-shell.enroll-active .app-nav nav .nav-button.active { background: transparent; color: var(--muted); }
.app-shell.enroll-active .app-nav nav #webcodex-enroll-link { background: var(--ui-selection-fill); color: var(--ui-selection-ink); }
.app-shell.enroll-active .app-content { position: relative; }
.app-shell.enroll-active .app-content > :not(#webcodex-enroll-frame) { visibility: hidden; }
#webcodex-enroll-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: var(--surface); }
#webcodex-enroll-mobile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: var(--muted); font-size: var(--ui-font-caption); text-decoration: none; }
.app-shell.enroll-active #webcodex-enroll-mobile { background: var(--ui-accent-soft); color: var(--ui-on-accent-soft); border-radius: var(--ui-radius-md); font-weight: 700; }
.app-shell.enroll-active .mobile-primary-nav button.active { background: transparent; color: var(--muted); }
@media (max-width: 700px) {
  .app-shell.enroll-active .app-content { min-height: calc(100dvh - 100px); }
  .mobile-primary-nav:has(#webcodex-enroll-mobile) { grid-template-columns: repeat(4, 1fr); }
}